@layer components {
    .tabs {
        --tabs-height: auto;
        --tabs-direction: row;
        --tabs-content-bg: var(--bg-neutral-secondary);
        --border-color: var(--border-neutral-secondary, #e6e6e6);
        height: var(--tabs-height);
        flex-wrap: wrap;
        flex-direction: var(--tabs-direction);
        display: flex;
        gap: 10px;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }


    .tabs-item {
        appearance: none;
        text-align: center;
        -webkit-user-select: none;
        user-select: none;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        display: inline-flex;
        position: relative;
    }

    .tabs-item {
        --tabs-p: 10px;
        order: 0;
        padding-inline: var(--tabs-p);
        padding: 8px 12px 8px 12px;
        z-index: 1;
        transition: 0.2s ease-in-out;
        transition-property: background-color, border-color, filter;
    }

    .tabs-item:is(label) {
        border: var(--btn-border-width, 1px) solid var(--border-color);
        border-radius: var(--btn-border-radius);

        &:not(:has(:disabled)):is(:active, :checked, :has(:checked)) {
            --border-color: var(--border-neutral-primary, #1e1e1e);
        }
    }

    .tabs-item:focus-within {
        outline: var(--outline-width, 2px) solid var(--focus, #937600);
        outline-offset: var(--outline-offset, 4px);
        border-radius: var(--outline-radius, 12px);
    }

    .tabs-item {
        --tabs-grayscale: 100%;
        filter: grayscale(var(--tabs-grayscale));

        &:not(:has(:disabled)):is(:hover,:active,:has(:hover,:active,:checked)) {
            --tabs-grayscale: 0%;
        }
    }

    .tabs-item:is(label):has(:disabled) {
        opacity: 0.5;
    }

    .tabs-item > :is(input[type=radio]) {
        min-width: fit-content;
    }


    @media (min-width: 576px) {
        :is(.tabs-item:checked,.tabs-item:has(:checked)).tabs-item:after {
            background-color: var(--tabs-content-bg);
            content: "";
            width: 23px;
            height: 20px;
            mask-repeat: no-repeat;
            display: block;
            position: absolute;
            mask-image: url('data:image/svg+xml,<svg width="23" height="20" viewBox="0 0 23 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.5 0L23 20H0L11.5 0Z" fill="currentColor"/></svg>');
            bottom: -25px;
        }
    }

    .tabs-item:is(label) {
        position: relative;
    }


    .tabs-item:is(label) input {
        position: absolute;
        appearance: none;
        opacity: 0;
        inset: 0;

        &:not(:disabled) {
            cursor: pointer;
        }
    }


    .tabs-content {
        order: 1;
        width: 100%;
        height: calc(100% - var(--tabs-height));
        display: none;
        background-color: var(--tabs-content-bg);
        padding: 24px 24px 24px 24px;
        margin-top: 14px;
        border-radius: 8px;
        position: sticky;
    }
    :is(.tabs-item:checked,.tabs-item:is(label:has(:checked))) + .tabs-content {
        display: block;
    }
}