////////////////////////////////////////////////////////////////////////////////
//
//  Licensed to the Apache Software Foundation (ASF) under one or more
//  contributor license agreements.  See the NOTICE file distributed with
//  this work for additional information regarding copyright ownership.
//  The ASF licenses this file to You under the Apache License, Version 2.0
//  (the "License"); you may not use this file except in compliance with
//  the License.  You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
//  Unless required by applicable law or agreed to in writing, software
//  distributed under the License is distributed on an "AS IS" BASIS,
//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//  See the License for the specific language governing permissions and
//  limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////

// Jewel Layouts

// Layouts variables
$gaps: 10
$gap-step: 3
$gap: 0px

$grid-columns: 12 !default
$gap-size: 10px !default

.viewport
	overflow: visible

	&.clipped
		overflow: hidden
	
	&.scroll
		overflow: auto

// Basic
.layout.basic
	position: relative
	> *
		position: absolute !important

.layout
	display: flex

	// Horizontal
	&.horizontal
		flex-direction: row
		flex-wrap: nowrap
		align-items: flex-start
	
		> *
			flex: 0 1 auto

		// &.variableRowHeight
		// 	> *
		// 		flex: 0 0 auto
				
		&.flow
			flex-wrap: wrap
			max-width: 100%

		&.centered
			justify-content: center
			align-items: center
			align-content: center
			// height: 100%

			// for centered layouts we need priority
			> *
				flex: 0 0 auto !important

		&.tile
			flex-wrap: wrap

		// FormItemLayout
		&.formitem
			width: 100%
			// flex-wrap: wrap
			align-items: flex-start
			// justify-content: center

		@for $i from 1 through $gaps
			&.gap-#{$i}x#{$gap-step}px
				> *:first-child
					margin-left: 0px
				> *
					margin-left: $gap + $i * $gap-step

		&.itemsReverse
			@for $i from 1 through $gaps
				&.gap-#{$i}x#{$gap-step}px
					> *:last-child
						margin-left: 0px
					> *
						margin-left: $gap + $i * $gap-step

		&.sameWidths
			> *
				flex: 1 0 0
		&.pixelWidths
			> *
				flex: none
		&.proportionalWidths
			> *
				flex: 1 0
		&.percentWidths
			> *
				flex: 1 0 auto
		&.naturalWidths
			> *
				flex: none

	// Vertical
	&.vertical
		flex-direction: column
		flex-wrap: nowrap
		align-items: flex-start

		> *
			flex: 0 1 auto
		
		// &.variableRowHeight
		// 	> *
		// 		flex: 0 0 auto
		
		&.flow
			flex-wrap: wrap

		&.centered
			justify-content: center
			align-items: center
			align-content: center
			flex-direction: column
			height: 100%

			// for centered layouts we need priority
			> * 
				flex: 0 0 auto !important

		&.tile
			flex-wrap: wrap

		// FormLayout (consider for now Forms are always vertical)
		&.form
			width: 100%

		// FormItemLayout
		// &.formitem
		// 	width: 100%

		@for $i from 1 through $gaps
			&.gap-#{$i}x#{$gap-step}px
				> *:first-child
					margin-top: 0px
				> *
					margin-top: $gap + $i * $gap-step

		&.itemsReverse
			@for $i from 1 through $gaps
				&.gap-#{$i}x#{$gap-step}px
					> *:-child
						margin-top: 0px
					> *
						margin-top: $gap + $i * $gap-step

	
	// this not compile******
	// &.gap
	// 	> *:first-child
	// 		margin: 0px
	// 	> *:nth-child(-n+3)
	// 		margin: 0px 0px 0px $gap-size
	// 	> *:nth-child(3n)
	// 		margin: $gap-size 0px 0px
	// 	> *
	// 		margin: $gap-size 0px 0px $gap-size

	// Grid
	&.grid
		flex-flow: row wrap
		width: 100%
		// height: 100%
		
		> *
			flex: 1 1 auto // flex-grow, flex-shrink and flex-basis
			max-width: 100%
			width: 100%
			
		
		@each $size in $size-names
			@media (min-width: map-get($sizes, $size))
				@for $i from 1 through $grid-columns
					@for $j from 1 through $i
						.#{$size}-col-#{$j}-#{$i}
							width: percentage(math.div($j, $i))
		&.gap	
			> *
				margin: math.div($gap-size, 2)
			@each $size in $size-names
				@media (min-width: map-get($sizes, $size))
					@for $i from 1 through $grid-columns
						@for $j from 1 through $i
							.#{$size}-col-#{$j}-#{$i}
								width: calc(#{percentage(math.div($j, $i))} - #{$gap-size})
	&.horizontal, &.vertical, &.grid
		&.itemsSpaceBetween
			justify-content: space-between
		&.itemsSpaceAround
			justify-content: space-around
		&.itemsSameHeight
			//align-items: stretch  --> this doen't seems to work as expected
			> *
				> *
					min-height: 100%
		&.itemsExpand
			width: 100%
			> *
				flex: 1 0 auto

	&.horizontal, &.grid
		// Vertical Items Align
		&.itemsCentered
			align-items: center
		&.itemsTop
			align-items: flex-start
		&.itemsBottom
			align-items: flex-end

		// Horizontal Items Align
		&.itemsLeft
			justify-content: flex-start
		&.itemsCenter
			justify-content: center
		&.itemsRight
			justify-content: flex-end
		
		&.itemsReverse
			flex-direction: row-reverse
		
	&.vertical
		// Vertical Items Align
		&.itemsCentered
			justify-content: center
		&.itemsTop
			justify-content: flex-start
		&.itemsBottom
			justify-content: flex-end

		// Horizontal Items Align
		&.itemsLeft
			align-items: flex-start
		&.itemsCenter
			align-items: center
		&.itemsRight
			align-items: flex-end
		
		&.itemsReverse
			flex-direction: column-reverse
			
	&.table
		table
			display: table

@each $size in $size-names			
	@if index($size-names, $size) == 1
		@media (max-width: nth(nth($sizes, 2), 2) - 1)
			+visible-hidden-responsive-rules($size)
	@else if index($size-names, $size) != 1 and index($size-names, $size) < length($sizes)
		@media (min-width: map-get($sizes, $size)) and (max-width: nth(nth($sizes, index($size-names, $size) + 1), 2) - 1)
			+visible-hidden-responsive-rules($size)
	@else if index($size-names, $size) == length($sizes)
		@media (min-width: nth(nth($sizes, length($sizes)), 2))
			+visible-hidden-responsive-rules($size)

#{$visible-sizes}
	display: none !important

#{$hidden-sizes}
	display: flex !important

// #{$hidden-flex-sizes}
// 	display: flex !important