/*
 * Classes for easy flexrow usage
 */


/* ##########
 * Container class
  ########### */
RV-FlexRow__Container(prefix='&')
	display flex
	height 100%

/*
 * Orientation
 */
RV-FlexRow__Container--horizontal()
	flex-direction row

RV-FlexRow__Container--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__Container--breakPoint(localBreakPoint=500px, mediaBreakPoint=null)
	flex-wrap wrap
	RV-Reset()
	gap 0px

	RV-Utils__Hook--throw('flexrow_breakpoint_gap', @(gap){
			RV-Utils__ElementAmount(@(index, total){
					min-width "calc((%s - (%s * (%s - 1))) / %s - (2 * %s))" % (localBreakPoint gap index index gap)

					*{
						min-width initial
					}
				}
			)
		}
	)

	*{
		flex-basis 'calc(%s * 999 - 100% * 999)' % localBreakPoint
	}
	
	if mediaBreakPoint !=null
		@media(max-width mediaBreakPoint)
			RV-FlexRow__Container--column()

/*
 * Flexbox behavior, Row is horizontal, but item are wraped individualy
 */
RV-FlexRow__Container--auto()
	RV-FlexRow__Container--horizontal()
	flex-wrap wrap

/*
 * Shorthand for the modifiers above
 */
RV-FlexRow__Container--shorthands(break_width=500px)
	&--breakPoint
		RV-FlexRow__Container--breakPoint(break_width)

	&--horizontal
		RV-FlexRow__Container--horizontal()

	&--vertical
		RV-FlexRow__Container--vertical()

	&--auto
		RV-FlexRow__Container--auto()

/* ##########
 * Item class
  ########### */
RV-FlexRow__Item()
	flex-basis max-content
	RV-FlexRow__Item--normal()

/*
 * Varios relative width of items to each other
 */
RV-FlexRow__Item--normal()
	flex-grow 3
	flex-shrink 3

RV-FlexRow__Item--narrower()
	flex-grow 1
	flex-shrink 5

RV-FlexRow__Item--narrow()
	flex-grow 2
	flex-shrink 4

RV-FlexRow__Item--wide()
	flex-grow 4
	flex-shrink 2

RV-FlexRow__Item--wider()
	flex-grow 5
	flex-shrink 1

/*
 * Item has always the given width
 */
RV-FlexRow__Item--fixedSize(width=100px)
	RV-Sizes--fixedSize(width)

/*
 * Item width relativ to the container
 */
RV-FlexRow__Item--half()
	RV-Sizes--half()
RV-FlexRow__Item--third()
	RV-Sizes--third()

RV-FlexRow__Item--quarter()
	RV-Sizes--quarter()
	
RV-FlexRow__Item--content()
	RV-Sizes--content()

/*
 * Shorthand for the modifiers above
 */
RV-FlexRow__Item--shorthands()
	RV-Alignment()

	&--narrower
		RV-FlexRow__Item--narrower()

	&--narrow
		RV-FlexRow__Item--narrow()

	&--wide()
		RV-FlexRow__Item--wide()

	&--wider
		RV-FlexRow__Item--wider()

	&--fixedSize
		RV-FlexRow__Item--fixedSize()

	&--half
		RV-FlexRow__Item--half()

	&--third
		RV-FlexRow__Item--third()

	&--quarter
		RV-FlexRow__Item--quarter()

	&--content
		RV-FlexRow__Item--content()

/*
 * Combining basic classes
 */
RV-FlexRow(prefix='&')
	{prefix}__Container
		RV-FlexRow__Container(prefix=prefix)

	{prefix}__Item
		RV-FlexRow__Item()

/*
 * Combining shorthands
 */
RV-FlexRow--shorthands(break_width=500px, prefix='&')
	{prefix}__Container 
		RV-FlexRow__Container--shorthands(break_width)

	{prefix}__Item
		RV-FlexRow__Item--shorthands()

/*
 * Final CSS Class
 */
.RV-FlexRow
	RV-FlexRow()
	RV-FlexRow--shorthands()