@import 'constants';
@import 'styling';

.tabs {
    @include tabs-base;

    ul {
        list-style: none;
        align-items: center;
        display: flex;
        flex-grow: 1;
        flex-shrink: 0;
        justify-content: flex-start;
        padding: 0;
    }

    li {
        display: block;
        margin-bottom: 0;
        padding: 0;
        border-radius: $border-radius $border-radius 0 0;

        &.active {
            a {
                border-bottom-color: $color-dark;
                color: $color-dark;
            }

            &:hover, &:focus, &:active {
                a {
                    color: $color-white;
                }
            }
        }
        &:hover, &:focus {
            background-color: $color-dark;
            
            a {
                color: $color-white;
            }
        }
        &:active {
            background: darken-1($color-dark);
            border-color: darken-1($color-dark);
        }

        a {
            cursor: pointer;
            align-items: center;
            display: flex;
            justify-content: center;
            margin-bottom: -1px;
            padding: 0.5em 1em;
            vertical-align: top;
            border-bottom: 1px solid darken-1($color-light);
            color: $color-black;
            border-radius: $border-radius $border-radius 0 0;

            &:hover, &:focus {
                border-color: $color-dark;
            }
            
            &:active {
                border-color: darken-1($color-dark);
            }
        }
        
    }
    
    &.boxed {
        li {
            &:hover, &:focus {
                background: $color-dark;
                border-color: $color-dark;
            }

            &:active {
                background: darken-1($color-dark);
                border-color: darken-1($color-dark);
            }

            &.active {
                a {
                    background: transparent;
                    border: 1px solid $color-dark;
                    border-bottom-color: transparent !important;
                    color: $color-dark;

                    &:hover, &:focus {
                        background-color: $color-dark;
                        color: $color-white;
                    }

                    &:active {
                        background: darken-1($color-dark);
                        border-color: darken-1($color-dark);
                    }
                }
            }
        }
    }

    @each $size, $fontSize, $height, $padding in $tab-size-list {
        &.#{$size} {
            font-size: $fontSize;
        }
    }
    @if $include-color-palette {
        @include tabs-colors;
    }
}