.form-stepper__wrapper {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    height: var(--theme-form-medium-height);
    padding: var(--space);
    border: var(--theme-form-border-width) solid var(--theme-fill-30);
    border-radius: var(--theme-border-radius-default);
}

.form-stepper[t-size="small"] .form-stepper__wrapper {
    height: var(--theme-form-small-height);
}

.form-stepper[t-size="large"] .form-stepper__wrapper {
    height: var(--theme-form-large-height);
}

.form-stepper[t-variant="condensed"] .form-stepper__wrapper {
    background-color: var(--theme-fill-50);
    border: none;
}

.form-stepper[disabled] .form-stepper__wrapper {
    pointer-events: none;
    cursor: not-allowed;
}

.form-stepper__wrapper:not([disabled]):hover {
    border-color: var(--theme-emphasis-fill);
}

.form-stepper[t-variant="condensed"] .form-stepper__wrapper:not([disabled]):hover {
    background-color: var(--theme-fill-40);
}

.form-stepper[t-variant="normal"] .form-stepper__wrapper--focused:not([disabled]) {
    border-color: var(--theme-emphasis-fill);
    box-shadow: 0px 0px 0px var(--theme-form-border-width) var(--theme-emphasis-fill);
}

.form-stepper__wrapper--invalid:not(:hover, .form-stepper__wrapper--focused) {
    border-color: var(--theme-critical-fill);
}

.form-stepper__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-x3);
    height: var(--space-x3);
    background-color: var(--theme-fill-40);
    border-radius: var(--theme-border-radius-default-inner);
}

.form-stepper__button:not(.form-stepper__button--disabled):hover {
    background-color: var(--theme-emphasis-40);
}

.form-stepper__button:not(.form-stepper__button--disabled):focus {
    background-color: var(--theme-emphasis-30);
}

.form-stepper[t-size="large"] .form-stepper__button,
.form-stepper[t-variant="condensed"] .form-stepper__button {
    width: var(--space-x4);
    height: var(--space-x4);
}

.form-stepper[t-variant="condensed"] .form-stepper__button {
    color: var(--theme-text-10);
    background-color: var(--theme-text-inverse);
    box-shadow: var(--theme-elevation-10);
}

.form-stepper[t-variant="condensed"][t-size="large"] .form-stepper__button {
    width: var(--space-x5);
    height: var(--space-x5);
}

.form-stepper__button--disabled {
    color: var(--theme-text-30);
    pointer-events: none;
    cursor: not-allowed;
    background-color: var(--theme-fill-40);
}

.form-stepper .form-stepper__button-icon {
    --material-icon-width: var(--theme-icon-20-font-size);
    --material-icon-height: var(--theme-icon-20-font-size);

    color: var(--theme-text-10);
}

.form-stepper__button--disabled .form-stepper__button-icon {
    color: var(--theme-text-30);
}

.form-stepper .prevent-select {
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-user-select: none; /* Safari */
    user-select: none; /* Prevent selecting text */
}

.form-stepper[t-variant="condensed"] .form-stepper__button--disabled {
    opacity: 0.6;
}

.form-stepper__input {
    width: auto;
    height: 100%;
    font: var(--theme-paragraph-30);
    color: var(--theme-text-10);
    text-align: center;
    letter-spacing: var(--theme-paragraph-30-letter-spacing);
    background-color: transparent;
    border: none;
    outline: none;
}