.text-input {
    --status-color: transparent;
    --status-text-color: var(--grey-80);
    --stroke: var(--status-color);
    --input-text-color: var(--grey-100);
    --border-color: var(--default-border-color);
    --background-color: var(--white);
    --transition: all 0.2s ease;

    .text-input-box {
        position: relative;
        min-width: 320px;
        height: 40px;
        padding: 8px 16px;
        overflow: hidden;
        background-color: var(--background-color);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        cursor: text;
        transition: var(--transition);

        &:hover {
            --border-color: var(--grey-50);
        }

        &:focus-within {
            --border-color: var(--digital-blue-40);

            box-shadow: 0 0 0 4px #c7e4ff;
        }

        &::before {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            height: 2px;
            background-color: var(--status-color);
            content: '';
        }
    }

    input {
        padding: 0;
        color: var(--input-text-color);
        background-color: var(--background-color);
        border: none;

        &:focus {
            outline: none;
        }
    }

    .text-input-message {
        margin-left: 4px;
        color: var(--status-text-color);
    }

    &.invalid {
        --status-color: var(--critical-70);
        --status-text-color: var(--critical-100);
    }

    &.warning {
        --status-color: var(--warning-70);
        --status-text-color: var(--warning-90);
    }

    &.disabled .text-input-box {
        --background-color: var(--grey-20);
        --input-text-color: var(--grey-60);

        label {
            color: var(--grey-60);
        }

        pointer-events: none;
    }

    &.empty:not(:focus-within) {
        label {
            @extend %body-m;
        }

        input {
            max-height: 0;
        }
    }

    .caption-label {
        @extend .caption-book-subdued;

        line-height: 12px;
    }
}