@include exports("tabstrip/layout") {

    .k-tabstrip-wrapper {
        padding: $tabstrip-wrapper-padding-y $tabstrip-wrapper-padding-x;
        border-width: $tabstrip-wrapper-border-width;
        border-style: solid;
        display: flex;
        flex-direction: column;
    }

    .k-tabstrip {
        border-width: 0;
        border-color: transparent;
        box-sizing: border-box;
        outline: 0;
        font-family: $tabstrip-font-family;
        font-size: $tabstrip-font-size;
        line-height: $tabstrip-line-height;
        color: inherit;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        .k-tabstrip-wrapper > & {
            flex: 1 1 auto;
        }

        @at-root .k-tabstrip-items {
            border-width: 0;
            border-style: solid;
            border-color: inherit;
            outline: 0;
            display: flex;
            flex-direction: row;
            flex: 0 0 auto;
            position: relative;

            .k-item {
                margin: 0;
                padding: 0;
                border: $tabstrip-item-border-width solid transparent;
                position: relative;
                flex-shrink: 0;
                display: flex;
                flex-direction: row;
                align-items: stretch;
                justify-items: stretch;
                outline: 0;
            }

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

            .k-link {
                padding: $tabstrip-item-padding-y $tabstrip-item-padding-x;
                color: inherit;
                cursor: pointer;
                display: inline-flex;
                vertical-align: middle;
                flex: 1 1 auto;
                flex-direction: row;
                align-content: center;
                align-items: center;
            }

            .k-remove-tab-link,
            .k-link[data-type="remove"] {
                padding: $tabstrip-item-padding-y;
                flex: none;
            }
        }
        @at-root .k-ie11 .k-tabstrip-items {
            white-space: nowrap;
        }

        > .k-content {
            padding: $tabstrip-content-padding-y $tabstrip-content-padding-x;
            border-width: $tabstrip-content-border-width;
            border-style: solid;
            border-color: inherit;
            display: none;
            overflow: auto;
            flex: 1 1 auto;

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

        // Loading
        @at-root .k-tabstrip-items .k-loading {
            width: 20%;
            height: 0;
            border: 0;
            border-top: 1px solid transparent;
            border-color: inherit;
            background: none;
            position: absolute;
            top: 0;
            left: 0;
            transition: width .2s linear;

            &.k-complete {
                width: 100%;
                border-top-width: 0;
            }
        }

        // Scrolling
        &.k-tabstrip-scrollable {
            position: relative;

            > .k-content {
                border-width: $tabstrip-content-border-width;
            }

            > .k-tabstrip-items {
                border-width: 0;
                white-space: nowrap;
                overflow: hidden;
            }

            > .k-tabstrip-prev {
                position: absolute;
                left: 0;
            }

            > .k-tabstrip-next {
                position: absolute;
                right: 0;
            }

            // Fixes kendo-theme-default#476
            .k-ie11 & {
                > .k-tabstrip-prev,
                > .k-tabstrip-next {
                    top: 0;
                }
            }
        }

    }


    // Tabstrip variants
    .k-tabstrip-top {
        > .k-tabstrip-items {
            border-bottom-width: $tabstrip-border-width;

            .k-item {
                @include border-top-radius( $tabstrip-item-border-radius );
                margin-bottom: -$tabstrip-border-width;
            }

            .k-item + .k-item {
                margin-left: $tabstrip-item-gap;
            }

            .k-item.k-state-active {
                border-bottom-color: transparent;
            }
        }

        > .k-content {
            @include border-bottom-radius( $tabstrip-item-border-radius );
            border-top-width: 0;
        }
    }
    .k-tabstrip-bottom {
        > .k-tabstrip-items {
            border-top-width: $tabstrip-border-width;

            .k-item {
                @include border-bottom-radius( $tabstrip-item-border-radius );
                margin-top: -$tabstrip-border-width;
            }

            .k-item + .k-item {
                margin-left: $tabstrip-item-gap;
            }

            .k-item.k-state-active {
                border-top-color: transparent;
            }
        }

        > .k-content {
            @include border-top-radius( $tabstrip-item-border-radius );
            border-bottom-width: 0;
        }

        &.k-tabstrip-scrollable {
            .k-tabstrip-prev,
            .k-tabstrip-next {
                bottom: 0;

                .k-ie11 & {
                    top: auto;
                }
            }
        }
    }
    .k-tabstrip-left {
        flex-direction: row;

        > .k-tabstrip-items {
            border-right-width: $tabstrip-border-width;
            display: inline-flex;
            flex-direction: column;

            .k-item {
                @include border-left-radius( $tabstrip-item-border-radius );
                margin-right: -$tabstrip-border-width;
            }

            .k-item + .k-item {
                margin-top: $tabstrip-item-gap;
            }

            .k-item.k-state-active {
                border-right-color: transparent;
            }
        }

        > .k-content {
            @include border-right-radius( $tabstrip-item-border-radius );
            // sass-lint:disable no-important
            margin: 0 !important;
            // sass-lint:enable no-important
            border-left-width: 0;
        }

    }
    .k-tabstrip-right {
        flex-direction: row-reverse;

        > .k-tabstrip-items {
            border-left-width: $tabstrip-border-width;
            display: inline-flex;
            flex-direction: column;

            .k-item {
                @include border-right-radius( $tabstrip-item-border-radius );
                margin-left: -$tabstrip-border-width;
            }

            .k-item + .k-item {
                margin-top: $tabstrip-item-gap;
            }

            .k-item.k-state-active {
                border-left-color: transparent;
            }
        }

        > .k-content {
            @include border-left-radius( $tabstrip-item-border-radius );
            // sass-lint:disable no-important
            margin: 0 !important;
            // sass-lint:enable no-important
            border-right-width: 0;
        }
    }


    // Selected indicator
    @if ($tabstrip-indicator-size) {

        .k-tabstrip-items {

            .k-item::after {
                content: "";
                border-width: 0;
                border-style: solid;
                display: none;
                position: absolute;
                z-index: 0;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;

                // Variants
                .k-tabstrip-top > & {
                    border-bottom-width: $tabstrip-indicator-size;
                }
                .k-tabstrip-bottom > & {
                    border-top-width: $tabstrip-indicator-size;
                }
                .k-tabstrip-left > & {
                    border-right-width: $tabstrip-indicator-size;
                }
                .k-tabstrip-right > & {
                    border-left-width: $tabstrip-indicator-size;
                }
            }
            .k-item.k-state-active::after {
                display: block;
            }

            .k-item > .k-link {
                z-index: 1;
            }
        }

    }

}




@include exports("tabstrip/layout/rtl") {
    .k-rtl .k-tabstrip,
    .k-tabstrip[dir="rtl"] {

        &.k-tabstrip-left,
        &.k-tabstrip-right {
            > .k-tabstrip-items { order: 1; }
            > .k-content { order: 0; }
        }

        .k-tabstrip-prev {
            left: auto;
            right: 0;
            transform: scaleX(-1);
        }

        .k-tabstrip-next {
            left: 0;
            right: auto;
            transform: scaleX(-1);
        }

    }

}