@import '../base/layout';
@import '../animation/effect';

@include exports('tabstrip/layout') {

.k-tabstrip {
    border-style: solid;
    border-width: 1px;
    display: block;

    margin: 0;
    padding: 0;
    position: relative;
    zoom: 1;

    > .k-button {
        position: absolute;
        top: .4em;
        user-select: none;
        z-index: 2;
    }

    &.k-header {
        border: 0;
    }
}

.k-tabstrip-items {
    .k-tabstrip-scrollable & {
        overflow: hidden;
        white-space: nowrap;
    }

    .k-item {
        border-style: solid;
        border-width: 1px 1px 0;
        display: inline-block;
        list-style-type: none;
        margin: 0 -1px 0 0;
        outline: 0;
        padding: 0;
        position: relative;
        vertical-align: top;

        .k-link {
            border-bottom-width: 0;
            display: inline-block;
            padding: .5em .92em;
        }

        .k-icon {
            margin: -1px 4px 0 -3px;
            vertical-align: top;
        }

        .k-image,
        .k-sprite {
            margin: -3px 3px 0 -6px;
            vertical-align: middle;
        }
    }

    .k-tab-on-top,
    .k-state-active {
        margin-bottom: -1px;
        padding-bottom: 1px;
    }

    .k-tab-on-top {
        z-index: 1;
    }
}

.k-tabstrip-prev {
    left: .4em;
}

.k-tabstrip-next {
    right: .4em;
}

.k-tabstrip > .k-content {
    border-style: solid;
    border-width: 1px;
    display: none;
    margin: 0 .286em .3em;
    overflow: auto;
    padding: .3em .92em;
    position: static;
    zoom: 1;

    &.k-state-active {
        display: block;
    }
}

// left and right tabs

.k-tabstrip-left,
.k-tabstrip-right {
    > .k-content {
        margin: .286em .3em;
    }

    .k-tabstrip-items {
        .k-item {
            display: block;
            margin-bottom: -1px;
        }

        .k-link {
            display: block;
        }

        .k-tab-on-top,
        .k-state-active {
            margin-bottom: -1px;
            padding-bottom: 0;
        }
    }
}

// left tabs

.k-tabstrip-left > .k-tabstrip-items {
    float: left;
    padding: .3em 0 .3em .3em;

    .k-item {
        border-width: 1px 0 1px 1px;
    }

    .k-state-active {
        border-width: 1px 0 1px 1px;
    }

    .k-tab-on-top,
    .k-state-active {
        margin-right: -2px;
        padding-right: 1px;
    }
}

// right tabs

.k-tabstrip-right > .k-tabstrip-items {
    float: right;
    padding: .3em .3em .3em 0;

    .k-item {
        border-width: 1px 1px 1px 0;
    }

    .k-state-active {
        border-width: 1px 1px 1px 0;
    }

    .k-tab-on-top,
    .k-state-active {
        margin-left: -1px;
        padding-left: 1px;
    }
}

// bottom tabs

.k-tabstrip-bottom {
    > .k-button {
        bottom: .4em;
        top: auto;
    }

    > .k-tabstrip-items {
        margin-top: -1px;
        padding: 0 .3em .3em;

        .k-item {
            border-width: 0 1px 1px;
        }

        .k-state-active {
            margin-bottom: 0;
            padding-bottom: 0;
        }
    }

    > .k-content {
        margin: .3em .286em 0;
        min-height: 100px;
        position: relative;
        z-index: 1;
    }
}
}