@import '../base/states';
@import './layout';
@import '../mixins/blend-modes';

$tabstrip-tabs-color: $accent !default;
$tabstrip-background-color: $background !default;
$tabstrip-border-color: rgba(0, 0, 0, .08) !default;
$tabstrip-hover-color: blend-multiply($accent, darken($background, 8%)) !default;
$tabstrip-active-color: $normal-text-color !default;
$tabstrip-active-background-color: desaturate($background, 1%) !default;
$tabstrip-disabled-color: darken($background, 27%) !default;

@include exports('tabstrip/theme') {

.k-tabstrip {
    background-color: transparent;

    .k-item {
        border-color: transparent;
        border-radius: $border-radius $border-radius 0 0;

        .k-link {
            color: $tabstrip-tabs-color;
        }

        &:hover {
            .k-link {
                color: $tabstrip-hover-color;
            }
        }

        &.k-state-active {
            border-color: $tabstrip-border-color;

            .k-link {
                color: $tabstrip-active-color;
            }
        }

        &.k-state-disabled {
            .k-link {
                color: $tabstrip-disabled-color;
            }
        }
    }

    .k-content {
        color: $tabstrip-active-color;
        border-color: $tabstrip-border-color;
        border-radius: 0 0 $border-radius $border-radius;
    }

    > .k-state-active,
    .k-tabstrip-items .k-state-active {
        background-color: $tabstrip-active-background-color;
    }

    &.k-tabstrip-right {
        .k-content {
            border-radius: $border-radius 0 0 $border-radius;
        }

        .k-item {
            border-radius: 0 $border-radius $border-radius 0;
        }
    }

    &.k-tabstrip-left {
        .k-content {
            border-radius: 0 $border-radius $border-radius 0;
        }

        .k-item {
            border-radius: $border-radius 0 0 $border-radius;
        }
    }

    &.k-tabstrip-bottom {
        .k-content {
            border-radius: $border-radius $border-radius 0 0;
        }

        .k-item {
            border-radius: 0 0 $border-radius $border-radius;
        }
    }
}
}