/*
 * Classes for easy flexrow usage
 */

/*
 * Orientation
 */
RV-FlexRow--horizontal()
	+RV-Block__Modifier--name('horizontal')
		flex-direction row

RV-FlexRow--vertical()
	+RV-Block__Modifier--name('vertical')
		flex-direction column
	
/*
 * Breaks from row to column orientation at the given breakpoint
 * breaks when the container is smaller than $-localBreakPoint or when the viewport is smaller than $-mediaBreakPoint.
 */
RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint)
	+RV-Block__Modifier--name('breakPoint')
		flex-wrap wrap
		RV-Reset()
		gap 0px
		
		RV-Utils__ElementAmount(@(index, total){
				min-width "calc((%s - (var(--spacing-inner) * (%s - 1))) / %s - (2 * var(--spacing-inner)))" % (localBreakPoint index index)
			}
		)

		+RV-Element('Item')
			min-width initial
			flex-basis 'calc(%s * 999 - 100% * 999)' % localBreakPoint
			overflow hidden
		
		@media(max-width mediaBreakPoint)
			flex-direction row

/*
 * Typical Flexbox behavior, Row is horizontal, but item are wraped individualy
 */
RV-FlexRow--auto()
	+RV-Block__Modifier--name('auto')
		RV-FlexRow--horizontal()
		flex-wrap wrap


/* ##########
 * Item class
  ########### */
RV-FlexRow__Item()
	+RV-Element--name('Item')
		flex-basis max-content
		flex-grow 3
		flex-shrink 3

/*
 * Varios relative width of items to each other
 */

RV-FlexRow__Item--narrower()
	+RV-Element__Modifier--name('narrower')
		flex-grow 1
		flex-shrink 5

RV-FlexRow__Item--narrow()
	+RV-Element__Modifier--name('narrow')
		flex-grow 2
		flex-shrink 4

RV-FlexRow__Item--wide()
	+RV-Element__Modifier--name('wide')
		flex-grow 4
		flex-shrink 2

RV-FlexRow__Item--wider()
	+RV-Element__Modifier--name('wider')
		flex-grow 5
		flex-shrink 1

/*
 * Item has always the given width
 */
RV-FlexRow__Item--fixedSize(width)
	+RV-Element__Modifier--name('fixedSize')
		RV-Sizes--fixedSize(width)

/*
 * Item width relativ to the container
 */
RV-FlexRow__Item--half()
	+RV-Element__Modifier--name('half')
		RV-Sizes--half()

RV-FlexRow__Item--third()
	+RV-Element__Modifier--name('third')
		RV-Sizes--third()

RV-FlexRow__Item--quarter()
	+RV-Element__Modifier--name('quarter')
		RV-Sizes--quarter()
	
RV-FlexRow__Item--content()
	+RV-Element__Modifier--name('content')
		RV-Sizes--content()

/* ##########
 * Block
  ########### */
RV-FlexRow()
	display flex
	height 100%

+RV-Block('RV-FlexRow')
	RV-FlexRow()
	
	RV-CSSParameter({
		width: 100px
		localBreakPoint: 500px,
		mediaBreakPoint: 100vw
	})
	
	+RV-Element()
		RV-FlexRow__Item()
		
		+RV-Element__Modifier()
			RV-FlexRow__Item--narrower()
	
		+RV-Element__Modifier()
			RV-FlexRow__Item--narrow()
			
		+RV-Element__Modifier()
			RV-FlexRow__Item--wide()
			
		+RV-Element__Modifier()
			RV-FlexRow__Item--wider()
			
		+RV-Element__Modifier()
			RV-FlexRow__Item--fixedSize(width)
			
		+RV-Element__Modifier()
			RV-FlexRow__Item--narrower()
			
		+RV-Element__Modifier()
			RV-FlexRow__Item--half()
			
		+RV-Element__Modifier()
			RV-FlexRow__Item--third()
			
		+RV-Element__Modifier()
			RV-FlexRow__Item--quarter()
			
		+RV-Element__Modifier()
			RV-FlexRow__Item--content()
	
	+RV-Block__Modifier()
		RV-FlexRow--horizontal()
		
	+RV-Block__Modifier()
		RV-FlexRow--vertical()
		
	+RV-Block__Modifier()
		RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint)
		
	+RV-Block__Modifier()
		RV-FlexRow--auto()