scss-library/components/01_Layouts/breakPoint/_breakPoint.styl

RV-BreakPoint__Item--outside()
	+RV-Element--modifier()
		flex-shrink 999

RV-BreakPoint__Item--inside()
	+RV-Element--modifier()
		flex-grow 0

RV-BreakPoint__Item(breakPoint, fixedSize=var(--fixedSize))
	+RV-Element()
		RV-FlexRow__Item()
		flex-basis 'calc(%s * 999 - 100% * 999)' % breakPoint
		overflow: hidden;
		--outer-spacing 0
		--inner-spacing 0
		
		RV-BreakPoint__Item--outside()
		RV-BreakPoint__Item--inside()
		RV-BreakPoint__Item--fixedSize(fixedSize)

// Test skipping a level or two
RV-BreakPoint--wrap__Item--outside()
	+RV-Element--modifier()
		margin-bottom -100vh
		
RV-BreakPoint--wrap__Item()
	+RV-Element()
		RV-BreakPoint--wrap__Item--outside()

RV-BreakPoint--wrap()
	+RV-Block--modifier()
		RV-BreakPoint--wrap__Item()	


RV-BreakPoint--horizontal__Item--outside()
	+RV-Element--modifier()
		margin-bottom unset
		height unset
		
RV-BreakPoint--horizontal__Item()
	+RV-Element()
		RV-BreakPoint--horizontal__Item--outside()

RV-BreakPoint--horizontal()
	+RV-Block--modifier()
		flex-wrap nowrap
		flex-direction row
		RV-BreakPoint--horizontal__Item()

RV-BreakPoint--vertical__Item--outside()
	+RV-Element--modifier()
		margin-bottom unset
		height unset
		
RV-BreakPoint--vertical__Item()
	+RV-Element()
		RV-BreakPoint--vertical__Item--outside()


RV-BreakPoint--vertical()
	+RV-Block--modifier()
		flex-direction column
		flex-wrap nowrap
		height 100%
		
		RV-BreakPoint--vertical__Item()

RV-BreakPoint(breakPoint)
	+RV-Block()
		RV-CSSParameter({
			breakPoint: breakPoint
			fixedSize: 100px
		})
		
		&&
			--inner-spacing 0
		RV-FlexRow()
		RV-FlexRow--wrap()
		
		overflow-y hidden
		
		RV-Reset()
		gap 0px
		
		RV-BreakPoint__Item(--breakPoint, --fixedSize)
		
		RV-BreakPoint--wrap()
		RV-BreakPoint--horizontal()
		RV-BreakPoint--vertical()
		
RV-BreakPoint(500px)