.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 {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 var(--space-x1_5);
    color: black;
    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__button--selected .form-choice__label {
    color: var(--theme-fill-inverse-solid);
    background-color: hsl(var(--brand-primary));
    border-color: transparent;
}

.form-choice__label:hover,
.form-choice__label:active {
    border-color: hsl(var(--brand-primary));
}

.form-choice__label:active {
    outline: hsl(var(--brand-primary)) 2px solid;
    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;
    gap: var(--space-half);
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.form-choice__overhead-label-text {
    padding-top: var(--space-half);
    font-size: calc(var(--theme-font-size-minus-2) - 2px);
    text-align: center;
}

.form-choice__input {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: var(--theme-font-size-base);
    line-height: var(--theme-line-height-base);
    cursor: pointer;
    border-radius: var(--theme-border-radius-input-medium);
}

/* 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(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);
}