.pso-tabs {
    --fs: var(--F-S);
}

.pso-tabs__inner {
    display: flex;
    border-bottom: 2px solid var(--c-base-200);
}

.pso-tabs__item {
    --c: var(--c-contrast-slight);
    --ic: var(--c-contrast-slight);

    display: flex;
    align-items: center;
    gap: var(--G1);
    padding: var(--G2);
    font-size: var(--fs);
    color: var(--c);
    cursor: pointer;
    transition: var(--TRANS);

    .pso-badge {
        --c: var(--c);
        
        padding-block: var(--G1);
    }

    &.pso-active {
        --c: var(--c-contrast);

        color: var(--c);
        box-shadow: 0 2px 0 var(--c);

        &:hover {
            --c: var(--c-contrast);

            color: var(--c);
            box-shadow: 0 2px 0 var(--c);
        }
    }

    @include mq($from: desktop) {
        &:hover {
            --c: var(--c-contrast-light);

            box-shadow: 0 2px 0 var(--c-contrast-elight);
        }
    }
}

.pso-tabs--boxed {
    padding: var(--G1);
    background-color: var(--PS-COLOR--APP);
    border-radius: var(--BORDER-RADIUS--MD);
    box-shadow: var(--BOX-SHADOW--HARD);

    .pso-tabs__inner {
        gap: var(--G1);
        border: none;
    }

    .pso-tabs__item {
        box-shadow: none;

        &:hover {
            box-shadow: none;
        }

        &.pso-active {
            --c: var(--c-primary-dark);

            box-shadow: none;

            &:hover {
                --c: var(--c-primary-dark);
            }
        }
    }

    .pso-btn {
        --h: 40px;
        --c: var(--c-contrast-slight);
        --ic: var(--c-contrast-slight);
        --bg: transparent;
        --ac-c: var(--c-primary-dark);
        --ac-ic: var(--c-primary-dark);
        --ac-bg: color-mix(in srgb, currentColor 10%, transparent);
    }
}