/*
  TABS
  ----
*/

/// @Foundation.settings
// Tabs
$tabstrip-background: transparent !default;

$tab-title-background: $gray-light !default;
$tab-title-background-hover: smartscale($tab-title-background, 5%) !default;
$tab-title-background-active: smartscale($tab-title-background, 3%) !default;
$tab-title-color: isitlight($tab-title-background) !default;
$tab-title-color-active: $tab-title-color !default;

$tab-title-padding: $global-padding !default;
$tab-content-padding: $global-padding !default;
///

@mixin tabstrip($orientation: horizontal, $background: $tabstrip-background) {
    /* Container styles */
    display: flex;
    background: $background;
    @if $orientation == vertical {
        flex-flow: column nowrap;
    } @else {
        flex-flow: row wrap;
    }
}
@mixin tabstrip-item(
    $background: $tab-title-background,
    $background-hover: $tab-title-background-hover,
    $background-active: $tab-title-background-active,
    $color: $tab-title-color,
    $color-active: $tab-title-color-active,
    $padding: $tab-title-padding
) {
    background: $background;
    padding: $padding;
    line-height: 1;
    margin: 0;
    flex: 0 1 auto;
    cursor: pointer;
    color: $color;
    &.is-active {
        background: $background-active;
        color: $color-active;
        &:hover {
            background: $background-hover;
        }
    }
    &:hover {
        background: $background-hover;
    }
}
@mixin tab-content($padding: $tab-content-padding) {
    padding: $padding;
}
@mixin tab-content-item {
    display: none;
    &.is-active {
        display: block;
    }
}
@include exports(tabs) {
    .tabs {
        @include tabstrip(horizontal);
        &.vertical {
            @include tabstrip(vertical);
        }
        .tab-item {
            @include tabstrip-item;
        }
    }
    .tab-contents {
        @include tab-content;
        .tab-content {
            @include tab-content-item;
        }
    }
}
