.selector-option {
    --selector-option-width: 100%;
    --selector-option-height: 60px;
    --selector-option-min-width: 80px;
    --selector-option-background: var(--color-secondary);
    --selector-option-border-radius: var(--border-radius-sm);
    --selector-option-spacing-vertical: var(--spacing-md);
    --selector-option-spacing-horizontal: var(--spacing-xs);
    --selector-option-border: 1px solid transparent;
    --selector-option-border-active: 1px solid var(--color-border-active);
    --selector-option-transition: all var(--transition-base);

    --selector-option-input-size: 1px;

    --selector-option-icon-opacity: .3;
    --selector-option-icon-opacity-active: 1;

    --selector-option-label-font-size: var(--font-size-sm);
    --selector-option-label-font-weight: var(--font-weight-bold);
    --selector-option-label-color: var(--color-white);
    --selector-option-label-opacity: .3;
    --selector-option-label-opacity-active: 1;

    width: var(--selector-option-width);
    height: var(--selector-option-height);
    min-width: var(--selector-option-min-width);
    background: var(--selector-option-background);
    border-radius: var(--selector-option-border-radius);
    cursor: pointer;
    padding: var(--selector-option-spacing-vertical) var(--selector-option-spacing-horizontal);
    margin-bottom: 0;
    text-align: center;
    border: var(--selector-option-border);
    transition: var(--selector-option-transition);

    &:hover,
    &:focus,
    &:has(input:checked) {
        border: var(--selector-option-border-active);

        .selector-option__icon {
            opacity: var(--selector-option-icon-opacity-active);
        }

        .selector-option__label {
            opacity: var(--selector-option-label-opacity-active);
        }
    }

    &:has(.selector-option__label) {
        --selector-option-spacing-vertical: var(--spacing-xs);
    }

    &:has(.selector-option__input:focus-visible) {
        outline: .125rem solid var(--color-primary);
        outline-offset: .125rem;
    }
}

.selector-option__input {
    position: absolute;
    opacity: 0;
    width: var(--selector-option-input-size);
    height: var(--selector-option-input-size);
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.selector-option__icon {
    opacity: var(--selector-option-icon-opacity);
    transition: var(--selector-option-transition);
}

.selector-option__label {
    display: block;
    color: var(--selector-option-label-color);
    font-size: var(--selector-option-label-font-size);
    font-weight: var(--selector-option-label-font-weight);
    opacity: var(--selector-option-label-opacity);
    transition: var(--selector-option-transition);
}