.form-stepper__wrapper {
    display: inline-flex;
    align-items: center;
    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);
    cursor: not-allowed;
    background-color: var(--theme-fill-40);
}

.form-stepper .form-stepper__button-icon {
    --material-icon-width: calc((var(--theme-font-size-base) * var(--theme-font-size-scale)) + 2px);
    --material-icon-height: calc((var(--theme-font-size-base) * var(--theme-font-size-scale)) + 2px);
    
    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%; */
    color: var(--theme-text-10);
    text-align: center;
    background-color: transparent;
    border: none;
    outline: none;
}