@import '../styles/_dimensions';
@import '../styles/_colors';

$border_size:8px; //The height of the border below links in the navigation
$link_border_spacing:3px; //The space between borders and elements in the navigation
$link_space_between:70px; //Spacing between links in the nav menu
$link_space_between_small:25px;

.vui-tablist{
  border-bottom:$border_size solid $color_border_light;

	> ol{
		box-sizing: border-box;
		display: flex;

		list-style: none;
		margin: 0 0 $border_size*-1;
    padding: 0;
    overflow: hidden;
		
		> li{
			margin: 0;
			padding: 0;
			line-height: 1.3;
			box-sizing: border-box;
			& + li{
				padding-left: $link_space_between;
				flex: 0 0 auto;
	
				@include media-break-down(lg){
					&{
						padding-left: $link_space_between_small;
					}
				}
			}

			> *{
				display: block;
				font-family: inherit;
				font-size: inherit;
				text-decoration: none;
				color: inherit;
				border: 0;
				background: transparent;
				color: $color_anchor_foreground;
				padding: 0 0 ($link_border_spacing + $border_size) 0;
				line-height: inherit;
				cursor: pointer;
				outline: none;
				&.active-tab, &:hover{
					border-bottom: $border_size solid $color_border_dark;
					padding-bottom: $link_border_spacing;
				}
				&.active-tab{
					font-weight: bold;
				}
			}
		}
	}

	&[data-tabposition="Center"] > ol{
		justify-content: center;
	}
	&[data-tabposition="Right"] > ol{
		justify-content: flex-end;
	}
	&[data-tabsize="Stretch"] > ol > li{
		flex: 1 1 auto;
		text-align: center;
		+ li{
			padding: 0;
		}
	}
	&[data-centered="true"] > ol{
		margin: 0 auto $border_size*-1;
    padding: 0 $dim-header-padding;
		max-width: $dim-header-width;
	}

	@include media-break-down(md){
		&[data-responsive="true"]{
			border-bottom: 0;
			> ol{
				flex-direction: column;
				border: 0;
				padding: 0;
				> li{
					border: 0;
					& + li{
						padding-left: 0;
					}
					> *{
						padding: 10px;
						&.active-tab, &:hover{
							border: 0;
							padding-bottom: 10px,
						}
						&:hover{
							background-color: base-color(sky-blue-lightest);
						}
					}
				}
			}
		}
	}
}