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

RV-BreakPoint__Item(breakPoint)
	+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-Element--modifier()
		flex-shrink 999

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

RV-BreakPoint(breakPoint)
	RV-FlexRow()
	+RV-Squash()
		RV-FlexRow--wrap()
	
	overflow-y hidden
	
	RV-Reset()
	gap 0px
	
	RV-Utils__ElementAmount--range(0, 20, @(index, total){
			min-width "calc((%s - (var(--spacing-inner) * (%s - 1))) / %s - (2 * var(--spacing-inner)))" % (breakPoint index index)
		}
	)

RV-BreakPoint--wrap()
	+RV-Block--modifier()
		+RV-Element('Item')
			+RV-Element--modifier('outside')
				margin-bottom -100vh

RV-BreakPoint--horizontal()
	+RV-Block--modifier()
		flex-wrap nowrap
		min-width min-content
		
		+RV-Element('Item')
			+RV-Element--modifier('outside')
				margin-bottom unset
				height unset

RV-BreakPoint--vertical()
	+RV-Block--modifier()
		flex-direction column
		flex-wrap nowrap
		height 100%
		
		+RV-Element('Item')
			+RV-Element--modifier('outside')
				margin-bottom unset
				height unset

+RV-Block('RV-BreakPoint')
	RV-CSSParameter({
		breakPoint: 500px
		fixedSize: 100px
	})
	
	&&
		--inner-spacing 0
	
	RV-BreakPoint(--breakPoint)
	
	+RV-Element()
		RV-BreakPoint__Item(--breakPoint)
		RV-BreakPoint__Item--outside()
		RV-BreakPoint__Item--inside()
		RV-BreakPoint__Item--fixedSize(--fixedSize)
		
	RV-BreakPoint--wrap()
	RV-BreakPoint--horizontal()
	RV-BreakPoint--vertical()