@import './index';
@import '../../style/themes/index';
@import '../../style/mixins/index';

.@{tab-prefix-cls} {

    // ========================== Top & Bottom ==========================
    &-top,
    &-bottom {
        flex-direction: column;

        >.@{tab-prefix-cls}-nav,
        >div>.@{tab-prefix-cls}-nav {
            margin: @tabs-bar-margin;

            &::before {
                position: absolute;
                right: 0;
                left: 0;
                border-bottom: @border-width-base @border-style-base @tabs-border-color-split;
                content: '';
            }

            .@{tab-prefix-cls}-ink-bar {
                height: 2px;

                &-animated {
                    transition: width @animation-duration-slow, left @animation-duration-slow,
                        right @animation-duration-slow;
                }
            }

            .@{tab-prefix-cls}-nav-wrap {

                &::before,
                &::after {
                    top: 0;
                    bottom: 0;
                    width: 30px;
                }

                &::before {
                    left: 0;
                    box-shadow: inset 10px 0 8px -8px fade(@tabs-shadow-color, 8%);
                }

                &::after {
                    right: 0;
                    box-shadow: inset -10px 0 8px -8px fade(@tabs-shadow-color, 8%);
                }

                &.@{tab-prefix-cls}-nav-wrap-ping-left::before {
                    opacity: 1;
                }

                &.@{tab-prefix-cls}-nav-wrap-ping-right::after {
                    opacity: 1;
                }
            }
        }
    }

    &-top {

        >.@{tab-prefix-cls}-nav,
        >div>.@{tab-prefix-cls}-nav {
            &::before {
                bottom: 0;
            }

            .@{tab-prefix-cls}-ink-bar {
                bottom: 0;
            }
        }
    }

    &-bottom {

        >.@{tab-prefix-cls}-nav,
        >div>.@{tab-prefix-cls}-nav {
            order: 1;
            margin-top: @margin-md;
            margin-bottom: 0;

            &::before {
                top: 0;
            }

            .@{tab-prefix-cls}-ink-bar {
                top: 0;
            }
        }

        >.@{tab-prefix-cls}-content-holder,
        >div>.@{tab-prefix-cls}-content-holder {
            order: 0;
        }
    }

    // ========================== Left & Right ==========================
    &-left,
    &-right {

        >.@{tab-prefix-cls}-nav,
        >div>.@{tab-prefix-cls}-nav {
            flex-direction: column;
            min-width: 50px;

            // >>>>>>>>>>> Tab
            .@{tab-prefix-cls}-tab {
                padding: @tabs-vertical-padding;
                text-align: center;
            }

            .@{tab-prefix-cls}-tab+.@{tab-prefix-cls}-tab {
                margin: @tabs-vertical-margin;
            }

            // >>>>>>>>>>> Nav
            .@{tab-prefix-cls}-nav-wrap {
                flex-direction: column;

                &::before,
                &::after {
                    right: 0;
                    left: 0;
                    height: 30px;
                }

                &::before {
                    top: 0;
                    box-shadow: inset 0 10px 8px -8px fade(@tabs-shadow-color, 8%);
                }

                &::after {
                    bottom: 0;
                    box-shadow: inset 0 -10px 8px -8px fade(@tabs-shadow-color, 8%);
                }

                &.@{tab-prefix-cls}-nav-wrap-ping-top::before {
                    opacity: 1;
                }

                &.@{tab-prefix-cls}-nav-wrap-ping-bottom::after {
                    opacity: 1;
                }
            }

            // >>>>>>>>>>> Ink Bar
            .@{tab-prefix-cls}-ink-bar {
                width: 2px;

                &-animated {
                    transition: height @animation-duration-slow, top @animation-duration-slow;
                }
            }

            .@{tab-prefix-cls}-nav-list,
            .@{tab-prefix-cls}-nav-operations {
                flex: 1 0 auto; // fix safari scroll problem
                flex-direction: column;
            }
        }
    }

    &-left {

        >.@{tab-prefix-cls}-nav,
        >div>.@{tab-prefix-cls}-nav {
            .@{tab-prefix-cls}-ink-bar {
                right: 0;
            }
        }

        >.@{tab-prefix-cls}-content-holder,
        >div>.@{tab-prefix-cls}-content-holder {
            margin-left: -@border-width-base;
            border-left: @border-width-base @border-style-base @tabs-border-color-split;

            >.@{tab-prefix-cls}-content>.@{tab-prefix-cls}-tabpane {
                padding-left: @padding-lg;
            }
        }
    }

    &-right {

        >.@{tab-prefix-cls}-nav,
        >div>.@{tab-prefix-cls}-nav {
            order: 1;

            .@{tab-prefix-cls}-ink-bar {
                left: 0;
            }
        }

        >.@{tab-prefix-cls}-content-holder,
        >div>.@{tab-prefix-cls}-content-holder {
            order: 0;
            margin-right: -@border-width-base;
            border-right: @border-width-base @border-style-base @tabs-border-color-split;

            >.@{tab-prefix-cls}-content>.@{tab-prefix-cls}-tabpane {
                padding-right: @padding-lg;
            }
        }
    }
}