amis/scss/components/_tabs.scss

.#{$ns}Tabs {
    &-links {
        border-bottom: $Tabs-borderWidth solid $Tabs-borderColor;
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;

        &::before {
            display: table;
            content: ' ';
        }

        >.#{$ns}Tabs-link {
            margin-bottom: -$Tabs-borderWidth;
            display: inline-block;
            position: relative;

            >a:first-child {
                font-size: $Tabs-linkFontSize;
                outline: none;
                border: $Tabs-borderWidth solid transparent;
                border-top-left-radius: $Tabs-borderRadius;
                border-top-right-radius: $Tabs-borderRadius;
                color: $Tabs-color;
                margin: $Tabs-linkMargin;
                padding: $Tabs-linkPadding;
                text-decoration: none;
                cursor: pointer;
                display: block;
            }

            >.#{$ns}Combo-toolbarBtn {
                position: absolute;
                right: -10px;
                top: -10px;
                z-index: 10;
                display: none;
            }

            &:hover>.#{$ns}Combo-toolbarBtn {
                display: block;
            }

            &:hover>a:first-child,
            >a:first-child:focus {
                border-color: $Tabs-onHover-borderColor;
                text-decoration: none;
            }

            &.disabled>a:first-child,
            &.is-disabled>a:first-child {
                color: $Tabs-onDisabled-color;
                background-color: transparent;
                border-color: transparent;
                pointer-events: none;
            }

            &.active>a:first-child,
            &.is-active>a:first-child {
                color: $Tabs-onActive-color;
                background-color: $Tabs-onActive-bg;
                border-color: $Tabs-onActive-borderColor;
                border-bottom-color: transparent;
            }
        }
    }

    &-content {
        background-color: $Tabs-content-bg;
        padding: $gap-base;
        border-style: solid;
        border-width: 0 $Tabs-borderWidth $Tabs-borderWidth;
        border-color: $Tabs-borderColor;
    }

    &-pane {
        display: none;
        opacity: 0;
        transition: opacity 0.35s linear;

        &.is-active {
            display: block;
        }

        &.in {
            opacity: 1;
        }
    }

    &--line {
        >.#{$ns}Tabs-links {
            border-bottom-color: $Tabs--line-borderColor;

            >li {
                >a:first-child {
                    border-width: 0 0 $Tabs--line-borderWidth 0;
                    padding: $Tabs--line-linkPadding;
                    margin: $Tabs--line-linkMargin;

                    &:hover,
                    &:focus {
                        color: #666;
                        background-color: transparent;
                        border-color: transparent;
                    }
                }

                &:last-child {
                    >a {
                        margin: 0;
                    }
                }

                &.is-active {

                    >a:first-child,
                    >a:first-child:hover,
                    >a:first-child:focus {
                        border-color: $Tabs--line-onHover-borderColor;
                        color: $Tabs--line-onHover-color;
                        background-color: transparent;
                    }
                }
            }
        }

        >.#{$ns}Tabs-content {
            border-width: 0;
            padding: $Tabs--line-content-padding;
            background-color: $Tabs--line-content-bg;
        }
    }

    &--card {
        >.#{$ns}Tabs-links {
            padding: $Tabs--card-padding;
            background-color: $Tabs--card-bg;
            border-top: px2rem(1px) solid $Tabs--card-borderTopColor;

            >li {
                &.is-active {

                    >a:first-child,
                    >a:first-child:hover,
                    >a:first-child:focus {
                        border-color: $Tabs--card-onActive-borderColor;
                        color: $primary;
                        border-bottom-color: $Tabs--card-onActive-bg;
                        background-color: $Tabs--card-onActive-bg;
                    }
                }

                >a:first-child {
                    padding: $Tabs--card-linkPadding;
                    margin: $Tabs--card-linkMargin;

                    &:hover,
                    &:focus {
                        color: #666;
                        background-color: $Tabs--card-onActive-bg;
                        border-bottom-color: transparent;
                    }
                }
            }
        }

        >.#{$ns}Tabs-content {
            border-width: 0;
        }
    }

    &--radio {
        >.#{$ns}Tabs-links {
            border: 0;
            margin-bottom: px2rem(10px);

            >li {
                margin: 0;

                >a:first-child {
                    border-width: px2rem(1px);
                    border-color: $Tabs-borderColor;
                    font-size: $fontSizeSm;
                    text-align: center;
                    margin: 0;
                    padding: 0 px2rem(10px);
                    min-width: 68px;
                    height: px2rem(30px);
                    line-height: px2rem(30px);
                    border-radius: 0;
                    background: $Tabs--radio-bg;

                    &:hover,
                    &:focus {
                        color: $primary;
                    }
                }

                &.is-active {

                    >a:first-child,
                    >a:first-child:hover,
                    >a:first-child:focus {
                        color: $Tabs--radio-bg;
                        background-color: $primary;
                        border-color: $primary;
                        position: relative;
                        z-index: 1;
                    }
                }
            }

            >li+li {
                margin-left: -1px;
            }
        }

        >.#{$ns}Tabs-content {
            border-top: $Tabs-borderWidth solid $Tabs-borderColor;
        }
    }

    &--vertical {
        display: flex;
        min-height: px2rem(200px);
        border: $Tabs-borderWidth solid $Tabs-borderColor;
        border-radius: 0;

        >.#{$ns}Tabs-links {
            width: px2rem(140px);
            background: #F5F5F5;
            border: none;
            padding-bottom: px2rem(60px);

            >li {
                margin: 0 0 0 -1px;
                display: block;

                >a:first-child {
                    border-color: transparent;
                    border-radius: 0;
                    border-width: 0 0 0 px2rem(4px);
                    margin: 0;

                    &:hover,
                    &:focus {
                        color: $primary;
                        border-color: transparent;
                    }
                }

                &.is-active {

                    >a:first-child,
                    >a:first-child:hover,
                    >a:first-child:focus {
                        color: $primary;
                        border-color: $primary;
                    }
                }
            }
        }


        >.#{$ns}Tabs-content {
            border: none;
            flex-grow: 1;
        }
    }
}