@use '../../scss/config.scss' as *;

.tabs {
    &.boxed .items,
    &.outline .items {
        @include background(primary-50);
        @include border-radius(md);
        @include spacing(p-xs);
        @include size(wmax-content);
        @include border(0);

        button {
            @include transition();
            @include border-radius(md);
            @include spacing(p-sm);

            &[data-active="true"] {
                @include border(0);
                @include background(primary-70);
                padding-bottom: 10px;
            }
        }
    }

    &.outline .items {
        @include background(transparent);
        @include border(primary-50);

        button {
            margin-bottom: 0;

            &[data-active="true"] {
                @include background(primary-50);
            }
        }
    }

    &.even .items button {
        @include layout(h-center);
        flex: 1;
    }

    &.vertical {
        @include layout(flex, default);

        &.boxed .items button,
        &.outline .items button {
            @include border(bottom, 0);
        }

        &:not(.outline) .items {
            @include border(0);
        }
        
        .items {
            @include layout(column, xs);
            
            button {
                @include spacing(p-sm);
                @include border(2px, bottom, primary-50);

                &[data-active="true"] {
                    padding-bottom: 10px;
                }
            }
        }

        .content {
            @include spacing(m0);
        }
    }

    .wrapper {
        @include visibility(auto);
    }

    .items {
        @include border(2px, bottom, primary-50);
        @include layout(flex, sm);

        button {
            @include transition(color);
            @include background(transparent);
            @include typography(default, primary-20);
            @include border(0);
            @include spacing(p-md);
            @include layout(flex, v-center, sm);

            cursor: pointer;
            flex-shrink: 0;

            svg {
                @include size(20px);
                pointer-events: none;
            }

            &[disabled] {
                @include typography(primary-30);
                cursor: no-drop;
            }
            
            &[data-active="true"] {
                @include typography(primary);
                @include border(2px, bottom, primary);

                padding-bottom: 13px;
            }
        }
    }

    .content {
        @include spacing(mt-default);

        & > *:not(astro-slot),
        & > astro-slot > * {
            @include visibility(none);
    
            &[data-active="true"] {
                @include visibility(block);
            }
        }
    }
}

@include media('xs') {
    .tabs {
        &.even .items {
            @include size(wauto);
        }
    }
}