.vtablist {
    display: flex;
    flex-direction: row;
    gap: var(--spacingHorizontalL);

    input[type=radio] {
        appearance: none;
        -webkit-appearance: none;
        margin: 0;
        width: 0;
        height: 0;
        border: 0;
        position: absolute;

        &::after {
            display: none;
        }
    }

    label {
        cursor: pointer;
        padding: var(--spacingVerticalS) 0;
        border-bottom: var(--strokeWidthThicker) solid transparent;
    
        background-color: transparent;
        color: var(--colorNeutralForeground2);
        font-size: var(--fontSizeBase300);
        font-weight: var(--fontWeightRegular);
        transition: color 0.1s ease, border-color 0.1s ease;

        &:has(input[type=radio]:checked) {
            color: var(--colorNeutralForeground1);
            font-weight: var(--fontWeightSemibold);
            border-bottom-color: var(--colorBrandStroke1);
        }

        &:hover {
            color: var(--colorNeutralForeground1);
            border-bottom-color: var(--colorNeutralStroke1Hover);
        }

        &:has(input[type=radio]:checked):hover {
            border-bottom-color: var(--colorBrandStroke1);
        }

        &:has(input[type=radio]:disabled) {
            color: var(--colorNeutralForegroundDisabled);
            pointer-events: none;
        }

        &:has(input[type=radio]:disabled:checked) {
            border-bottom-color: var(--colorNeutralStrokeDisabled);
        }
    }
}

/* Horizontal tablist — tabs stacked in a column, indicator on left */
.htablist {
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalXS);

    input[type=radio] {
        appearance: none;
        -webkit-appearance: none;
        margin: 0;
        width: 0;
        height: 0;
        border: 0;
        position: absolute;

        &::after {
            display: none;
        }
    }

    label {
        cursor: pointer;
        padding: 0 var(--spacingHorizontalM);
        border-left: var(--strokeWidthThicker) solid transparent;
        background-color: transparent;
        color: var(--colorNeutralForeground2);
        font-size: var(--fontSizeBase300);
        font-weight: var(--fontWeightRegular);
        transition: color 0.1s ease, border-color 0.1s ease;

        &:has(input[type=radio]:checked) {
            color: var(--colorNeutralForeground1);
            font-weight: var(--fontWeightSemibold);
            border-left-color: var(--colorBrandStroke1);
        }

        &:hover {
            color: var(--colorNeutralForeground1);
            border-left-color: var(--colorNeutralStroke1Hover);
        }

        &:has(input[type=radio]:checked):hover {
            border-left-color: var(--colorBrandStroke1);
        }

        &:has(input[type=radio]:disabled) {
            color: var(--colorNeutralForegroundDisabled);
            pointer-events: none;
        }

        &:has(input[type=radio]:disabled:checked) {
            border-left-color: var(--colorNeutralStrokeDisabled);
        }
    }
}