@import '../default/var';

.#{$prefix}-tabs {
    overflow: hidden;
    &-nav {
        cursor: pointer;
        color: #333;
        &:hover {
            color: $tabs-color-active;
        }
    }
    &--top,
    &--bottom {
        .#{$prefix}-tabs-nav {
            display: inline-block;
        }
    }
    &--left,
    &--right {
        display: flex;
        .#{$prefix}-tabs__header {
            width: 80px;
            vertical-align: top;
        }
        .#{$prefix}-tabs__content {
            flex: 1;
        }
        .#{$prefix}-tabs-nav {
            width: 100%;
        }
    }
    &--top {
        .#{$prefix}-tabs__header {
            border-bottom: solid 1px $tabs-color-border;
        }
    }
    &--bottom {
        .#{$prefix}-tabs__header {
            border-top: solid 1px $tabs-color-border;
        }
    }
    &--left {
        .#{$prefix}-tabs__header {
            text-align: right;
            border-right: solid 1px $tabs-color-border;
        }
    }
    &--right {
        .#{$prefix}-tabs__header {
            text-align: left;
            border-left: solid 1px $tabs-color-border;
        }
    }
    .is-active {
        color: $tabs-color-active;
    }
    @each $size in large,
    medium,
    small,
    mini {
        $fs: map-get($font-sizes, $size);
        $ns: map-get($form-sizes, $size);
        &--#{$size} {
            .#{$prefix}-tabs-nav {
                height: $ns;
                line-height: $ns - 2px;
                font-size: $fs;
                // padding: 0 $ns / 2;
            }
        }
        &--#{$size}.#{$prefix}-tabs--label:not(.#{$prefix}-tabs--left):not(.#{$prefix}-tabs--right) {
            .#{$prefix}-tabs-nav {
                &+.#{$prefix}-tabs-nav {
                    margin-left: $ns;
                }
            }
        }
    }
    &--card {
        .#{$prefix}-tabs-nav {
            background: $tabs-color-card-back;
            border: solid 1px $tabs-color-border;
            &.is-active,
            &:hover {
                background: #FFF;
            }
        }
        .#{$prefix}-tabs-nav-bar {
            display: none;
        }
        &.#{$prefix}-tabs--top,
        &.#{$prefix}-tabs--bottom {
            .#{$prefix}-tabs-nav {
                padding: 0 16px;
                &+.#{$prefix}-tabs-nav {
                    margin-left: 5px;
                }
            }
        }
        &.#{$prefix}-tabs--top {
            .#{$prefix}-tabs-nav {
                border-bottom: none;
                border-top-left-radius: 2px;
                border-top-right-radius: 2px;
            }
        }
        &.#{$prefix}-tabs--bottom {
            .#{$prefix}-tabs-nav {
                border-top: none;
                border-bottom-left-radius: 2px;
                border-bottom-right-radius: 2px;
            }
        }
        &.#{$prefix}-tabs--left,
        &.#{$prefix}-tabs--right {
            .#{$prefix}-tabs-nav {
                padding: 0 16px;
                &+.#{$prefix}-tabs-nav {
                    margin-top: 5px;
                }
            }
        }
        &.#{$prefix}-tabs--left {
            .#{$prefix}-tabs-nav {
                border-right: none;
                border-top-left-radius: 2px;
                border-bottom-left-radius: 2px;
            }
        }
        &.#{$prefix}-tabs--right {
            .#{$prefix}-tabs-nav {
                border-left: none;
                border-top-right-radius: 2px;
                border-bottom-right-radius: 2px;
            }
        }
    }
    &--capsule {
        .#{$prefix}-tabs-nav {
            background: $tabs-color-card-back;
            border: solid 1px $tabs-color-border;
            border-radius: none;
            &.is-active,
            &:hover {
                background: #FFF;
            }
        }
        .#{$prefix}-tabs-nav-bar {
            display: none;
        }
        &.#{$prefix}-tabs--top,
        &.#{$prefix}-tabs--bottom {
            .#{$prefix}-tabs-nav {
                padding: 0 16px;
                &:first-of-type {
                    border-right: none;
                }
                &:last-of-type {
                    border-left: none;
                }
                &+.#{$prefix}-tabs-nav {
                    margin-left: 0px;
                }
            }
        }
        &.#{$prefix}-tabs--top {
            .#{$prefix}-tabs-nav {
                border-bottom: none;
                &:first-of-type {
                    border-top-left-radius: 2px;
                }
                &:last-of-type {
                    border-top-right-radius: 2px;
                }
            }
        }
        &.#{$prefix}-tabs--bottom {
            .#{$prefix}-tabs-nav {
                border-top: none;
                &:first-of-type {
                    border-bottom-left-radius: 2px;
                }
                &:last-of-type {
                    border-bottom-right-radius: 2px;
                }
            }
        }
        &.#{$prefix}-tabs--left,
        &.#{$prefix}-tabs--right {
            .#{$prefix}-tabs-nav {
                padding: 0 16px;
                &:first-of-type {
                    border-bottom: none;
                }
                &:last-of-type {
                    border-top: none;
                }
                &+.#{$prefix}-tabs-nav {
                    margin-top: 5px;
                }
            }
        }
        &.#{$prefix}-tabs--left {
            .#{$prefix}-tabs-nav {
                border-right: none;
                &:first-of-type {
                    border-top-left-radius: 2px;
                }
                &:last-of-type {
                    border-bottom-left-radius: 2px;
                }
            }
        }
        &.#{$prefix}-tabs--right {
            .#{$prefix}-tabs-nav {
                border-left: none;
                &:first-of-type {
                    border-top-right-radius: 2px;
                }
                &:last-of-type {
                    border-bottom-right-radius: 2px;
                }
            }
        }
    }
    &__header {
        position: relative;
        // height: 5000px;
        // margin-bottom: -10000px;
    }
    &__content {
        overflow: hidden;
        padding: 20px;
        position: relative;
    }
    &-panel {
        display: inline-block;
        // transition: transform .3s;
    }
    &-nav-bar {
        position: absolute;
        background: $tabs-color-active;
        transition: all .3s;
    }
}