@import "global";

//
// @variables
//

$include-html-tabs-classes: $include-html-classes !default;

$tabs-navigation-padding: rem-calc(16) !default;
$tabs-navigation-bg-color: #efefef !default;
$tabs-navigation-hover-bg-color: darken($tabs-navigation-bg-color, 5%) !default;
$tabs-navigation-font-color: #222 !default;
$tabs-navigation-font-size: rem-calc(16) !default;
$tabs-navigation-font-family: $body-font-family !default;

$tabs-content-margin-bottom: rem-calc(24) !default;
$tabs-content-padding: $column-gutter/2 !default;

$tabs-vertical-navigation-margin-bottom: 1.25rem !default;

@include exports("tab") {
	@if $include-html-tabs-classes {
		.tabs { 
			@include clearfix; 
			margin-bottom: 0 !important;
			dd { 
				position: relative; 
				margin-bottom: 0 !important;
				top: 1px; 
				float: $default-float; 
				> a { 
					display: block; 
					background: $tabs-navigation-bg-color;
					color: $tabs-navigation-font-color; 
					padding-top: $tabs-navigation-padding;
					padding-#{$opposite-direction}: $tabs-navigation-padding * 2;
			    padding-bottom: $tabs-navigation-padding + rem-calc(1);
			    padding-#{$default-float}: $tabs-navigation-padding * 2;
					font-family: $tabs-navigation-font-family;
					font-size: $tabs-navigation-font-size; 
					&:hover { background: $tabs-navigation-hover-bg-color; }
				}
				&.active a { background: #fff; }
			}
			&.radius {
				dd:first-child {
					a { @include side-radius($default-float, $global-radius); }
				}
				dd:last-child {
					a { @include side-radius($opposite-direction, $global-radius); }
				}
			}
			&.vertical { 
				dd {
					position: inherit;
					float: none;
					display: block;
					top: auto;
				}
			}
		}

		.tabs-content { 
			@include clearfix; 
			margin-bottom: $tabs-content-margin-bottom;
			> .content { 
				display: none; 
				float: $default-float; 
				padding: $tabs-content-padding 0; 
				&.active { display: block; }
				&.contained { padding: $tabs-content-padding; }
			}
			&.vertical {
				display: block;
				> .content { padding: 0 $tabs-content-padding; }
			}
		}
		@media #{$medium-up} {
			.tabs {
				&.vertical {
					width: 20%; 
					float: $default-float; 
					margin-bottom: $tabs-vertical-navigation-margin-bottom;
				}
			}
			.tabs-content {
				&.vertical {
					width: 80%; 
					float: $default-float; 
					margin-#{$default-float}: -1px;
				}
			}
		}
	}
}