@use '../function' as *;
@use '../mixin';

@mixin roolith-tab() {
    .tab-list {
        @include mixin.clearfix();
        border-bottom: rem(1) solid var(--r-tab-border-color);
    }

    .tab-title {
        float: left;
        font-size: rem(14);
        font-weight: var(--r-global-font-bold-weight);
        padding: rem(10) rem(20);
        border-bottom: rem(2) solid transparent;
        margin-bottom: rem(-1);
        @include mixin.transition('color, border, background');

        &:hover {
            cursor: pointer;
            color: var(--r-tab-active-color);
            background: var(--r-tab-border-color);
        }

        &.active {
            border-color: var(--r-tab-active-color);
        }
    }

    .tab-list-fluid {
        &:before, &:after {
            display: none;
        }


        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(rem(100), 1fr));

        .tab-title {
            float: none;
            text-align: center;
        }
    }

    .tab-list-center {
        text-align: center;

        .tab-title {
            display: inline-block;
            float: none;
        }
    }

    .tab-content {
        padding: rem(15) 0;
        display: none;

        &.active {
            display: block;
        }
    }
}