.text-input {
    --text-input-border-radius: var(--border-radius-sm);
    --text-input-spacing-hotizontal: var(--spacing-lg);
    --text-input-spacing-vertical: var(--spacing-sm);
    --text-input-position-hotizontal: var(--spacing-lg);
    --text-input-font-size: var(--font-size-base);
    --text-input-line-height: var(--line-height-base);
    --text-input-font-weight: var(--font-weight-bold);
    --text-input-min-height: 60px;
    --text-input-transition: background-color var(--transition-slow), border-color var(--transition-slow);
    --text-input-background-color: var(--color-secondary);
    --text-input-color: var(--color-white);
    --text-input-color-label-float: var(--color-label-muted);
    --text-input-border-color: #ecf2f5;

    --text-input-prefix-position-horizontal: var(--spacing-lg);
    --text-input-prefix-position-vertical: 10px;
    --text-input-prefix-offset-horizontal: 60px;

    --text-input-unit-position-horizontal: 18px;
    --text-input-unit-position-vertical: 10px;

    --text-input-label-font-size: 14px;
    --text-input-label-letter-spacing: 1px;
    --text-input-label-floating-position-horizontal: 18px;
    --text-input-label-transition: transform var(--transition-fast), color var(--transition-fast);

    position: relative;
}

.text-input__field-wrapper {
    position: relative;

    &:has(.text-input__field--transparent-blue) .text-input__unit {
        color: var(--color-dark-blue);
    }

    &:has(.text-input__field--transparent-blue) .text-input__prefix {
        color: var(--color-dark-blue);
    }
}

.text-input__prefix {
    position: absolute;
    bottom: var(--text-input-prefix-position-vertical);
    left: var(--text-input-prefix-position-horizontal);
    font-size: var(--text-input-font-size);
    line-height: var(--text-input-line-height);
    font-weight: var(--text-input-font-weight);
    pointer-events: none;

    ~ .text-input__field {
        padding-left: var(--text-input-prefix-offset-horizontal);
    }

    ~ .text-input__unit {
        --text-input-unit-position-horizontal: 60px;
        white-space: nowrap;
    }
}

.text-input__unit {
    position: absolute;
    bottom: var(--text-input-unit-position-vertical);
    left: var(--text-input-unit-position-horizontal);
    font-size: var(--text-input-font-size);
    line-height: var(--text-input-line-height);
    font-weight: var(--text-input-font-weight);
    pointer-events: none;

    .hidden {
        opacity: 0;
    }
}

.text-input__field {
    border-radius: var(--text-input-border-radius);
    border: none;
    padding: var(--text-input-spacing-vertical) var(--text-input-spacing-hotizontal) var(--text-input-spacing-vertical);
    font-size: var(--text-input-font-size);
    line-height: var(--text-input-line-height);
    width: 100%;
    min-height: var(--text-input-min-height);
    font-weight: var(--text-input-font-weight);
    transition: var(--text-input-transition);
    -moz-appearance: textfield;

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    &:focus-visible {
        outline: .125rem solid var(--color-primary);
        outline-offset: .125rem;
        border-radius: var(--text-input-border-radius); !important;
    }

    &.text-input__field--white {
        border: 1px solid var(--text-input-border-color);
        font-weight: normal;
    }

    &.text-input__field--blue {
        background: var(--text-input-background-color);
        color: var(--text-input-color);
    }

    &.text-input__field--transparent-blue {
        background-color: transparent;
        border: none;
        border-radius: 0;
        color: var(--color-dark-blue);
        font-weight: var(--font-weight-bold);

        & ~ .text-input__label {
            --text-input-color: var(--color-dark-blue);
            --text-input-color-label-float: var(--color-dark-blue);
            --text-input-label-font-size: var(--font-size-md);
            --text-input-font-weight: var(--font-weight-regular);
        }
    }

    .text-input--floating & {
        padding-top: var(--spacing-xl);
    }
}

.text-input__label {
    position: absolute;
    left: var(--text-input-position-hotizontal);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-input-color);
    font-size: var(--text-input-label-font-size);
    line-height: var(--text-input-line-height);
    font-weight: var(--text-input-font-weight);
    letter-spacing: var(--text-input-label-letter-spacing);
    transition: var(--text-input-label-transition);
    width: 100%;
}

.text-input__error {
    display: block;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    bottom: calc(100% + var(--text-input-error-arrow-size));
    left: 0;
    background-color: var(--text-input-error-background);
    color: var(--text-input-error-color);
    font-size: var(--text-input-error-font-size);
    padding: var(--text-input-error-padding-vertical) var(--text-input-error-padding-horizontal);
    margin: 0;
    border-radius: var(--text-input-error-border-radius);
    white-space: nowrap;
    transition: opacity var(--transition-fast) 0.05s, visibility var(--transition-fast) 0.05s;

    &::after {
        content: '';
        position: absolute;
        top: 100%;
        left: var(--spacing-lg);
        border: var(--text-input-error-arrow-size) solid transparent;
        border-top-color: var(--text-input-error-background);
    }

    &.text-input__error--visible {
        opacity: 1;
        visibility: visible;
        z-index: 2;
        transition-delay: 0.05s;
    }
}

.text-input--floating .text-input__field:focus ~ .text-input__label,
.text-input--floating .text-input__field:not(:placeholder-shown) ~ .text-input__label {
    left: var(--text-input-label-floating-position-horizontal);
    color: var(--text-input-color-label-float);
    transform: translateY(-103%) scale(.85);
    transform-origin: left;
}

.text-input--floating .text-input__field:not(:placeholder-shown) + .text-input__unit {
    opacity: 1;
    visibility: visible;
    transition: all 0.2s ease-in-out;
}

.text-input--floating .text-input__field:placeholder-shown + .text-input__unit {
    opacity: 0;
    visibility: hidden;
}