.textbox {
    display: flex;
    flex-direction: column;
    width: 100%;
    transition: var(--transition-easeinout-fast);

    & > label {
        user-select: none;
        padding: 0.5rem 0;
        font-weight: bold;
    }

    & > input {
        height: 2.25rem;
        min-height: 2.25rem;
        padding: 0.25rem 0.75rem;
        border: var(--bdr-input);
        border-radius: var(--bdr-rounded);

        outline: none;
        box-shadow: var(--shadow-mid);
    }

    /* Error Message */
    & > .error-message {
        align-self: center;

        width: 90%;
        padding: 0 0.5rem;
        border-right: 3px solid transparent;
        border-bottom: 1px solid transparent;
        border-left: 3px solid transparent;
        border-radius: var(--bdr-rounded);

        font-size: 0.875rem;
        font-style: italic;
        color: var(--clr-input-error);

        box-shadow: var(--shadow-mid);

        &:not(.hidden) {
            border-color: var(--clr-input-error);
            background-color: color-mix(
                in srgb,
                var(--clr-input-error) 5%,
                white
            );
        }
    }

    &:has(input:hover),
    &:has(label:hover) {
        transform: translateY(-1px);

        & > label {
            color: var(--clr-input-text-hover);
        }

        & > input {
            border-color: var(--clr-input-border-hover);
            box-shadow: var(--shadow-high);
        }

        & > .error-message {
            box-shadow: var(--shadow-high);
        }
    }

    &:has(input:focus),
    &:has(label:focus) {
        transform: translateY(1px);

        & > label {
            color: var(--clr-primary-dark);
        }

        & > input {
            border-color: var(--clr-input-border-focused);
            box-shadow: var(--shadow-low);
        }

        & > .error-message {
            box-shadow: var(--shadow-low);
        }
    }

    &:has(input:disabled) {
        transform: unset;

        & > input {
            cursor: not-allowed;

            transform: unset;

            border: var(--bdr-input);

            background-color: var(--clr-input-bg-disabled);
            box-shadow: var(--shadow-mid);
        }

        & > label {
            cursor: not-allowed;
            color: var(--clr-input-text);
        }

        & > .error-message {
            box-shadow: var(--shadow-mid);
        }
    }
}