/* @docs */
$tabs-disabled-opacity: $base-disabled-opacity !default;
$tabs-font-size: $base-font-size !default;
$tabs-icon-margin: 0.5em !default;
$tabs-content-padding: 1rem !default;
$tabs-margin-bottom: 1.5rem !default;
$tabs-border-bottom-color: $grey-lighter !default;
$tabs-border-bottom-style: solid !default;
$tabs-border-bottom-width: 1px !default;
$tabs-link-color: hsl(0, 0%, 29%) !default;
$tabs-link-active-border-bottom-color: $primary !default;
$tabs-link-active-color: $primary !default;
$tabs-link-line-height: $base-line-height !default;
$tabs-link-padding: 0.5em 1em !default;
$tabs-boxed-link-radius: $base-border-radius !default;
$tabs-boxed-link-hover-background-color: hsl(0, 0%, 96%) !default;
$tabs-boxed-link-hover-border-bottom-color: hsl(0, 0%, 86%) !default;
$tabs-boxed-link-active-background-color: hsl(0, 0%, 100%) !default;
$tabs-boxed-link-active-border-color: hsl(0, 0%, 86%) !default;
$tabs-boxed-link-active-border-bottom-color: transparent !default;
$tabs-toggle-link-border-color: hsl(0, 0%, 86%) !default;
$tabs-toggle-link-border-style:	solid !default;
$tabs-toggle-link-border-width: 1px !default;
$tabs-toggle-link-hover-background-color: hsl(0, 0%, 96%) !default;
$tabs-toggle-link-hover-border-color: hsl(0, 0%, 71%) !default;
$tabs-toggle-link-radius: $base-border-radius !default;
$tabs-toggle-link-active-background-color: $primary !default;
$tabs-toggle-link-active-border-color: $primary !default;
$tabs-toggle-link-active-color: $primary-invert !default;
/* @docs */

@mixin item {
    -moz-appearance: none;
    -webkit-appearance: none;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    background-color: transparent;
    align-items: center;
    line-height: $tabs-link-line-height;
    @include avariable('font-size', 'tabs-font-size', $tabs-font-size);
    @include avariable('border-bottom-color', 'tabs-border-bottom-color', $tabs-border-bottom-color);
    @include avariable('border-bottom-style', 'tabs-border-bottom-style', $tabs-border-bottom-style);
    @include avariable('border-bottom-width', 'tabs-border-bottom-width', $tabs-border-bottom-width);
    @include avariable('color', 'tabs-link-color', $tabs-link-color);
    display: flex;
    justify-content: center;
    margin-bottom: -1px;
    @include avariable('padding', 'tabs-link-padding', $tabs-link-padding);
    vertical-align: top;
    cursor: pointer;
    text-decoration: none;
}

.o-tabs {
    &--fullwidth {
        width: 100%;
        .o-tabs__nav-item-wrapper {
            flex-grow: 1;
            flex-shrink: 0;
        }
        .o-tabs__nav-item-default, .o-tabs__nav-item-boxed, .o-tabs__nav-item-toggle {
            height: 100%;
        }
    }
    &--vertical {
        display: flex;
        flex-direction: row;

        .o-tabs__nav {
            flex-direction: column;
            align-items: stretch;
            flex-grow: 0;
            border-bottom: none;
        }

        .o-tabs__nav-item-boxed {
            border-bottom-color: transparent;
            @include avariable('border-right-color', 'tabs-border-bottom-color', $tabs-border-bottom-color);
            @include avariable('border-radius', 'tabs-border-bottom-color', #{$tabs-toggle-link-radius} 0 0 #{$tabs-toggle-link-radius});
            &--active {
                @include avariable('border-bottom-color', 'tabs-border-bottom-color', $tabs-border-bottom-color);
                border-right-color: transparent;
            }
        }

    }
    &--right {
        flex-direction: row-reverse;

        .o-tabs__nav-item-boxed {
            border-bottom-color: transparent;
            border-right-color: transparent;
            @include avariable('border-left-color', 'tabs-border-bottom-color', $tabs-border-bottom-color);
            @include avariable('border-radius', 'tabs-border-bottom-color', 0 #{$tabs-boxed-link-radius} #{$tabs-boxed-link-radius} 0);
            &--active {
                @include avariable('border-bottom-color', 'tabs-border-bottom-color', $tabs-border-bottom-color);
                @include avariable('border-right-color', 'tabs-border-bottom-color', $tabs-border-bottom-color);
                border-left-color: transparent;
            }
        }
    }
    &__nav {
        @include unselectable;
        margin: 0;
        padding: 0;
        align-items: center;
        display: flex;
        flex-grow: 1;
        flex-shrink: 0;
        justify-content: flex-start;
        overflow-x: auto;
        // padding bottom to keep showing the border-bottom
        @include avariable('padding-bottom', 'tabs-border-bottom-width', $tabs-border-bottom-width);
        @include avariable('font-size', 'tabs-font-size', $tabs-font-size);
        @each $name, $value in $sizes {
            &--#{$name} {
                @include avariable('font-size', ('tabs-font-size-' + #{$name}), $value);
            }
        }
        &--centered {
            justify-content: center;
        }
        &--right {
            justify-content: flex-end;
        }

        &-item {
            &-icon {
                @include avariable('margin-right', 'tabs-icon-margin', $tabs-icon-margin);
            }
            &-default {
                @include item;
                &--active {
                    @include avariable('border-bottom-color', 'tabs-link-active-border-bottom-color', $tabs-link-active-border-bottom-color);
                    @include avariable('color', 'tabs-link-active-color', $tabs-link-active-color);
                }
                &--disabled {
                    pointer-events: none;
                    cursor: not-allowed;
                    @include avariable('opacity', 'tabs-disabled-opacity', $tabs-disabled-opacity);
                }
                &:hover:not(.o-tabs__nav-item-default--active){
                    @include avariable('background-color', 'tabs-link-hover-background-color', $tabs-boxed-link-hover-background-color);
                    @include avariable('border-bottom-color', 'tabs-link-hover-border-bottom-color', $tabs-boxed-link-hover-border-bottom-color);
                }
            }
            &-boxed {
                @include item;
                @include avariable('border-radius', 'tabs-border-bottom-color', #{$tabs-boxed-link-radius} #{$tabs-boxed-link-radius} 0 0);
                border-bottom-color: transparent;
                &--active {
                    @include avariable('border-bottom-color', 'tabs-link-active-border-bottom-color', $tabs-link-active-border-bottom-color);
                    @include avariable('color', 'tabs-link-active-color', $tabs-link-active-color);
                    @include avariable('background-color', 'tabs-boxed-link-active-background-color', $tabs-boxed-link-active-background-color);
                    @include avariable('border-color', 'tabs-boxed-link-active-border-color', $tabs-boxed-link-active-border-color);
                    @include avariable('border-bottom-color', 'tabs-boxed-link-active-border-bottom-color', $tabs-boxed-link-active-border-bottom-color);
                }
                &--disabled {
                    pointer-events: none;
                    cursor: not-allowed;
                    @include avariable('opacity', 'tabs-disabled-opacity', $tabs-disabled-opacity);
                }
                &:hover:not(.o-tabs__nav-item-boxed--active){
                    @include avariable('background-color', 'tabs-boxed-link-hover-background-color', $tabs-boxed-link-hover-background-color);
                }
            }
            &-toggle {
                @include item;
                @include avariable('border-color', 'tabs-toggle-link-border-color', $tabs-toggle-link-border-color);
                @include avariable('border-style', 'tabs-toggle-link-border-style', $tabs-toggle-link-border-style);
                @include avariable('border-width', 'tabs-toggle-link-border-width', $tabs-toggle-link-border-width);
                margin-bottom: 0;
                position: relative;
                &--active {
                    @include avariable('background-color', 'tabs-toggle-link-active-background-color', $tabs-toggle-link-active-background-color);
                    @include avariable('border-color', 'tabs-toggle-link-active-border-color', $tabs-toggle-link-active-border-color);
                    @include avariable('color', 'tabs-toggle-link-active-color', $tabs-toggle-link-active-color);
                }
                &--disabled {
                    pointer-events: none;
                    cursor: not-allowed;
                    @include avariable('opacity', 'tabs-disabled-opacity', $tabs-disabled-opacity);
                }
                &:hover:not(.o-tabs__nav-item-toggle--active){
                    @include avariable('background-color', 'tabs-toggle-link-hover-background-color', $tabs-toggle-link-hover-background-color);
                    @include avariable('border-color', 'tabs-toggle-link-hover-border-color', $tabs-toggle-link-hover-border-color);
                }
            }
        }
    }

    &__content {
        position: relative;
        overflow: visible;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        @include avariable('padding', 'tabs-content-padding', $tabs-content-padding);
        &--transitioning {
            overflow: hidden;
        }
    }
    &:not(:last-child) {
        @include avariable('margin-bottom', 'tabs-margin-bottom', $tabs-margin-bottom);
    }
}