@layer components {
    .input {
        --_c: var(--input-color, var(--form-color, var(--color-text)));
        --_focus: var(--input-focus-color, var(--form-focus-color, var(--color-primary)));
        --_border-color: var(--input-border-color, var(--form-border-color, var(--color-border)));
        --_border-width: var(--input-border-width, var(--form-border-width, 2px));
        --_bordered-border-width: var(--input-bordered-border-width, var(--form-bordered-border-width, 1px));
        --_border-opacity: var(--input-border-opacity, var(--form-border-opacity, 0.3));
        --_placeholder-opacity: var(--input-placeholder-opacity, var(--form-placeholder-opacity, 0.5));
        --_icon-opacity: var(--input-icon-opacity, var(--form-icon-opacity, var(--_placeholder-opacity)));
        --_speed: var(--input-speed, var(--form-speed, var(--transition-speed)));
        --_submit-bg: var(--input-submit-bg, var(--_focus));
        --_submit-color: var(--input-submit-color, var(--color-on-primary));
        --_focus-glow: var(--input-focus-glow, var(--form-focus-glow, 0));
        --_focus-bg: var(--input-focus-bg, var(--form-focus-bg));
        --_fr-color: var(--input-focus-ring-color, var(--form-focus-ring-color, var(--color-border)));
        --_fr-width: var(--input-focus-ring-width, var(--form-focus-ring-width, 2px));
        --_fr-offset: var(--input-focus-ring-offset, var(--form-focus-ring-offset, 2px));
        --_fr-style: var(--input-focus-ring-style, var(--form-focus-ring-style, solid));
        --_fr-speed: var(--input-focus-ring-speed, var(--form-focus-ring-speed, 150ms));
    }

    /* Size variants */
    .input--sm {
        --_font: var(--font-size-body-sm);
        --_pad-y: var(--spacing-xs);
        --_pad-x: var(--spacing-sm);
        --_icon-size: 14px;
        --_clear-size: 12px;
        --_icon-inset: var(--spacing-xs);
        --_icon-pad: var(--spacing-xs);
        --_submit-radius: var(--radius-sm);
    }

    .input--md {
        --_font: var(--font-size-body);
        --_pad-y: var(--spacing-sm);
        --_pad-x: var(--spacing-md);
        --_icon-size: 16px;
        --_clear-size: 14px;
        --_icon-inset: var(--spacing-sm);
        --_icon-pad: var(--spacing-sm);
        --_submit-radius: var(--radius-md);
    }

    .input--lg {
        --_font: var(--font-size-lg);
        --_pad-y: var(--spacing-md);
        --_pad-x: var(--spacing-lg);
        --_icon-size: 18px;
        --_clear-size: 16px;
        --_icon-inset: var(--spacing-sm);
        --_icon-pad: var(--spacing-md);
        --_submit-radius: var(--radius-lg);
    }

    .input__label {
        display: block;
        font-size: var(--_font);
        color: var(--_c);
        margin-block-end: var(--spacing-xs);
    }

    /* Inline label */
    .input--inline {
        display: flex;
        align-items: baseline;
        gap: var(--spacing-sm);
    }

    .input--inline .input__label {
        margin-block-end: 0;
        white-space: nowrap;
        padding-block: var(--_pad-y);
    }

    .input--inline .input__wrap {
        flex: 1;
    }

    .input__wrap {
        position: relative;
    }

    .input__field {
        width: 100%;
        font-family: var(--font-body);
        font-size: var(--_font);
        padding: var(--_pad-y) var(--_pad-x);
        background: var(--input-bg, var(--form-bg, transparent));
        color: var(--_c);
        text-align: var(--input-align, left);
        outline: var(--_fr-width) var(--_fr-style) transparent;
        outline-offset: var(--_fr-offset);
        transition:
            border-color var(--_speed),
            box-shadow var(--_speed),
            background-color var(--_speed),
            outline-color var(--_fr-speed);
    }

    /* Style: underline */
    .input--underline .input__field {
        border: none;
        border-bottom: var(--_border-width) solid color-mix(in srgb, var(--_border-color) calc(var(--_border-opacity) * 100%), transparent);
    }

    .input--underline:has(.input__submit) .input__wrap {
        display: flex;
        align-items: stretch;
    }

    .input--underline:has(.input__submit) .input__field {
        flex: 1;
        min-width: 0;
    }

    .input--underline .input__submit {
        position: relative;
        top: auto;
        inset-inline-end: auto;
        transform: none;
        flex-shrink: 0;
        align-self: stretch;
        margin-inline-start: var(--_icon-pad);
    }

    .input--underline .input__submit--icon {
        width: calc(2 * var(--_pad-y) + var(--_font) * var(--line-height-base));
        padding: 0;
    }

    .input--underline:has(.input__submit) .input__field {
        padding-inline-end: var(--_pad-x);
    }

    /* Style: bordered */
    .input--bordered .input__field {
        border: var(--_bordered-border-width) solid var(--_border-color);
        border-radius: var(--input-radius, var(--form-radius, var(--radius-lg)));
    }

    .input--interact-hover .input__field:hover,
    .input--interact-both .input__field:hover {
        border-color: var(--_focus);
    }

    .input--interact-focus .input__field:focus,
    .input--interact-both .input__field:focus {
        border-color: var(--_focus);
    }

    /* Focus: ring */
    [data-focus-ring="keyboard"] .input .input__field:focus-visible {
        outline-color: var(--_fr-color);
    }

    [data-focus-ring="always"] .input .input__field:focus {
        outline-color: var(--_fr-color);
    }

    /* Focus: glow ring */
    .input--bordered .input__field:focus {
        box-shadow: 0 0 0 calc(var(--_focus-glow) * 3px) color-mix(in srgb, var(--_focus) calc(var(--_focus-glow) * 100%), transparent);
    }

    /* Focus: background */
    .input .input__field:focus {
        background-color: var(--_focus-bg, var(--input-bg, var(--form-bg, transparent)));
    }

    /* Focus: icon follows */
    .input--focus-icon:has(.input__field:focus) .input__icon {
        color: var(--_focus);
    }

    .input__icon {
        transition: color var(--_speed);
    }

    /* Focus: label follows */
    .input__label {
        transition: color var(--_speed);
    }

    .input--focus-label:has(.input__field:focus) .input__label {
        color: var(--_focus);
    }

    .input__field::placeholder {
        color: color-mix(in srgb, var(--_c) calc(var(--_placeholder-opacity) * 100%), transparent);
    }

    .input__field::-webkit-search-cancel-button,
    .input__field::-webkit-search-decoration {
        -webkit-appearance: none;
        appearance: none;
        display: none;
    }

    /* Icon slots */
    .input__icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--_icon-pad);
        color: color-mix(in srgb, var(--_c) calc(var(--_icon-opacity) * 100%), transparent);
        pointer-events: none;
    }

    .input__clear {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--_icon-pad);
        background: none;
        border: none;
        color: color-mix(in srgb, var(--_c) calc(var(--_icon-opacity) * 100%), transparent);
        cursor: pointer;
        transition: color var(--_speed);
    }

    .input__clear:hover {
        color: var(--_c);
    }

    .input__icon svg {
        width: var(--_icon-size);
        height: var(--_icon-size);
    }

    .input__clear svg {
        width: var(--_clear-size);
        height: var(--_clear-size);
    }

    .input__icon--before {
        inset-inline-start: var(--_icon-inset);
    }

    .input__icon--after,
    .input__clear {
        inset-inline-end: var(--_icon-inset);
    }

    /* Padding adjustments for icons */
    .input:has(.input__icon--before) .input__field {
        padding-inline-start: calc(var(--_pad-x) + var(--_icon-size) + var(--spacing-sm));
    }

    .input:has(.input__icon--after) .input__field,
    .input:has(.input__clear) .input__field {
        padding-inline-end: calc(var(--_pad-x) + var(--_icon-size) + var(--spacing-sm));
    }

    .input:has(.input__icon--after):has(.input__clear) .input__field {
        padding-inline-end: calc(var(--_pad-x) + var(--_icon-size) + var(--_clear-size) + var(--spacing-sm) * 2);
    }

    .input:has(.input__icon--after) .input__clear {
        inset-inline-end: calc(var(--_icon-inset) + var(--_icon-size) + var(--_icon-pad));
    }

    .input:has(.input__submit--icon) .input__field {
        padding-inline-end: calc(2 * var(--_pad-y) + var(--_font) * var(--line-height-base) + var(--_clear-size) + var(--_icon-pad));
    }

    .input:has(.input__submit:not(.input__submit--icon)) .input__field {
        padding-inline-end: calc(var(--_pad-x) * 4);
    }

    .input:has(.input__submit--icon) .input__clear {
        inset-inline-end: calc(2 * var(--_pad-y) + var(--_font) * var(--line-height-base));
    }

    .input:has(.input__submit:not(.input__submit--icon)) .input__clear {
        inset-inline-end: calc(var(--_pad-x) * 3);
    }

    /* Clear button — hidden until input has value */
    .input__clear {
        opacity: 0;
        pointer-events: none;
    }

    .input__clear.is-visible {
        opacity: 1;
        pointer-events: auto;
    }

    /* Text submit button inside input */
    .input__submit {
        position: absolute;
        top: 0;
        bottom: 0;
        inset-inline-end: 0;
        padding: 0 var(--_pad-x);
        background: var(--_submit-bg);
        border: none;
        border-radius: var(--_submit-radius);
        font-family: var(--font-button, var(--font-body));
        font-size: var(--_font);
        font-weight: var(--font-weight-button, 700);
        color: var(--_submit-color);
        cursor: pointer;
        transition: opacity var(--_speed);
    }

    .input__submit:hover {
        opacity: 0.85;
    }

    .input__submit--icon {
        padding: 0;
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .input__submit--icon svg {
        width: var(--_icon-size);
        height: var(--_icon-size);
    }

    .input--bordered .input__submit {
        border-radius: var(--radius-lg);
    }

    /* Floating label */
    .input--float .input__label {
        position: absolute;
        top: 50%;
        inset-inline-start: var(--_pad-x);
        transform: translateY(-50%);
        margin: 0;
        pointer-events: none;
        transition: transform var(--_speed), font-size var(--_speed);
        transform-origin: left top;
    }

    .input--float:has(.input__icon--before) .input__label {
        inset-inline-start: calc(var(--_pad-x) + var(--_icon-size) + var(--spacing-sm));
    }

    .input--float .input__field:focus ~ .input__label,
    .input--float .input__field:not(:placeholder-shown) ~ .input__label {
        transform: translateY(-150%) scale(0.75);
    }

    .input--float.input--bordered .input__field:focus ~ .input__label,
    .input--float.input--bordered .input__field:not(:placeholder-shown) ~ .input__label {
        transform: translateY(-180%) scale(0.75);
    }
}