amis2/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;

            > a {
                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-right: px2rem(2px);
                padding: $gap-sm $gap-base;
                text-decoration: none;
                cursor: pointer;
                display: block;
            }

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

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

            &.active > a,
            &.is-active > a {
                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 .35s linear;
        &.is-active {
            display: block;
        }
        &.in {
            opacity: 1;
        }
    }

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

            > li {
                &.is-active {
                    > a,
                    > a:hover,
                    > a:focus {
                        border-bottom: px2rem(2px) solid $primary;
                        color: $primary;
                        background-color: transparent;
                        border-color: transparent transparent $primary
                            transparent;
                    }
                }

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

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

            > li {
                &.is-active {
                    > a,
                    > a:hover,
                    > a:focus {
                        color: $primary;
                        background-color: #fff;
                        margin-left: px2rem(1px);
                    }
                }

                > a,
                > a:hover,
                > a:focus {
                    color: #666;
                    background-color: transparent;
                }
            }
        }
    }

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

            > li {
                > a {
                    font-size: $fontSizeSm;
                    text-align: center;
                    margin-right: 0;
                    padding: 0 px2rem(20px);
                    height: px2rem(30px);
                    line-height: px2rem(30px);
                }

                &.is-active {
                    > a,
                    > a:hover,
                    > a:focus {
                        color: #fff;
                        background-color: $primary;
                        margin-left: px2rem(1px);
                    }
                }

                > a,
                > a:hover,
                > a:focus {
                    color: $primary;
                    background-color: #eaf6fe;
                }
            }
        }

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