.form-choice__options {
    display: flex;
    gap: var(--space);
}

.form-choice__option {
    position: relative;
    display: flex;
    gap: var(--space-x2);
}

.form-choice__button {
    position: relative;
    min-width: var(--theme-form-medium-height);
    min-height: var(--theme-form-medium-height);
}

.form-choice[t-size="small"] .form-choice__button {
    min-width: var(--theme-form-small-height);
    min-height: var(--theme-form-small-height);
}

.form-choice__label {
    box-sizing: border-box;
    display: flex;
    gap: 2px;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 var(--space-x2);
    font: var(--theme-paragraph-30-semibold);
    color: var(--theme-emphasis-text);
    letter-spacing: var(--theme-paragraph-30-letter-spacing);
    cursor: pointer;
    border: 1px solid var(--theme-fill-30);
    border-radius: var(--theme-border-radius-input-medium);
    transition: color 0.3s ease, background-color 0.3s ease;
}

.form-choice__label--with-overhead {
    flex-direction: column;
}

.form-choice__button--selected .form-choice__label {
    color: var(--theme-fill-inverse-solid);
    background-color: var(--theme-fill-10);
    border-color: transparent;
}

.form-choice__label:hover,
.form-choice__label:active {
    border-color: var(--theme-emphasis-fill);
}

.form-choice__label:active {
    outline: var(--theme-form-border-width) solid var(--theme-emphasis-fill);
    outline-offset: calc(var(--theme-form-border-width) * -2);
}

.form-choice[t-size="small"] .form-choice__label {
    border-radius: var(--theme-border-radius-input-small);
}

.form-choice__label-text {
    position: relative;
    display: inline-flex;
}

.form-choice__label--with-overhead .form-choice__label-text {
    font: var(--theme-heading-30);
    letter-spacing: var(--theme-heading-30-letter-spacing);
}

.form-choice__label--with-overhead .form-choice__label-text--overhead {
    padding-top: var(--space-half);
    font: var(--theme-paragraph-10-medium);
    letter-spacing: var(--theme-paragraph-10-letter-spacing);
}

.form-choice__input {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    font: var(--theme-paragraph-30-medium);
    letter-spacing: var(--theme-paragraph-30-letter-spacing);
    cursor: pointer;
    border-radius: var(--theme-border-radius-input-medium);
}

.form-choice__input:checked {
    background-color: var(--theme-fill-10);
    border-color: transparent;
}

.form-choice__input:checked ~ .form-choice__label-text {
    color: var(--theme-fill-inverse-solid);
}

/* stylelint-disable-next-line no-descending-specificity */
.form-choice__button--disabled .form-choice__label,
.form-choice__button--disabled .form-choice__input {
    color: var(--theme-text-30);
    pointer-events: none;
    cursor: not-allowed;
    background-color: var(--theme-fill-40);
}

.form-choice--invalid .form-choice__input {
    border: 1px solid var(--theme-critical-fill);
}

.form-choice[t-size="small"] .form-choice__input {
    border-radius: var(--theme-border-radius-input-small);
}

/* grid */
.form-choice[t-variant="grid"] .form-choice__options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
}

@media (min-width: 700px) {
    .form-choice[t-variant="grid"] .form-choice__options {
        grid-template-columns: repeat(var(--form-choice-column-count, 3), 1fr);
    }
}

.form-choice[t-variant="grid"][columns="1"] .form-choice__options,
.form-choice[t-variant="grid"][columns="2"] .form-choice__options {
    grid-template-columns: repeat(2, 1fr);
}

.form-choice[t-variant="grid"] .form-choice__label {
    padding: var(--space);
}

.form-choice[t-variant="grid"] .form-choice__button {
    height: 100%;
    min-height: var(--theme-form-medium-height);
}

.form-choice[t-variant="grid"][t-size="small"] .form-choice__button {
    min-height: var(--theme-form-small-height);
}

/* carousel */
.form-choice[t-variant="carousel"] {
    --ui-carousel-gap-override: var(--space);
}

/* Override labelInput macro */
.choice-label .form-element__label, .form-element__label--truncate  {
    font: var(--theme-paragraph-10);
    color: var(--theme-text-20);
    letter-spacing: var(--theme-paragraph-10-letter-spacing);
}