@mixin tab($color, $fg: $color) {
    background: $color;
    background-image: linear-gradient(to top, darken($color, 5%), $color);
    border-color: $color;
    text-shadow: 0 1px 0 $color;
    color: darken($fg, 30%);

    &:hover {
        background: darken($color, 5%);
        background-image: linear-gradient(to bottom, darken($color, 5%), $color);
        border-color: darken($color, 5%);
    }

    &:active {
        background: darken($color, 10%);
        border-color: darken($color, 10%);
        box-shadow: 0 1px 2px rgba($color, 0.6);
    }

    &:focus {
        border-color: darken($color, 5%);
        box-shadow: 0 0 0 1px rgba($color, 0.2), 0 1px 2px rgba($color, 0.2);
    }

    &:disabled {
        background: darken($color, 20%);
        border-color: darken($color, 25%);
        text-shadow: none;
        color: darken($fg, 30%);
    }

    &.active {
        background: darken($color, 15%);
        background-image: linear-gradient(to top, darken($color, 10%), darken($color, 15%));
        border-color: 1px darken($color, 20%) solid;
        box-shadow: inset 0 0 5px rgba(darken($color, 20%), 0.4);
    }
}

.tabs {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;

    .tab {
        display: block;
        margin: 0;
        padding: 0.5em 1em;
        background: $black;
        border: 1px solid $black;
        color: $white;
        text-decoration: none;
        text-shadow: 0 1px 0 $black;
        transition: all 0.2s ease-in-out;

        @if $border-radius <= 0 {
            &:first-child {
                border-top-left-radius: 3px;
                border-bottom-left-radius: 3px;
            }
            &:last-child {
                border-top-right-radius: 3px;
                border-bottom-right-radius: 3px;
            }
        } @else {
            &:first-child {
                border-top-left-radius: $border-radius;
                border-bottom-left-radius: $border-radius;
            }
            &:last-child {
                border-top-right-radius: $border-radius;
                border-bottom-right-radius: $border-radius;
            }
        }

        &:hover {
            background: $black;
            border-color: $black;
            cursor: pointer;
        }
    
        &:focus {
            outline: none;
            border-color: $black;
        }
    }

    .tab-primary {
        @include tab($accent);
    }

    .tab-secondary {
        @include tab($accent-alt);
    }

    .tab-success {
        @include tab($green);
    }

    .tab-danger {
        @include tab($red);
    }

    .tab-warning {
        @include tab($orange);
    }

    .tab-info {
        @include tab($blue);
    }

    .tab-light {
        @include tab($white, #121212);
    }

    .tab-dark {
        @include tab($black, #fefefe);
    }
}