/*@example <input is="input" />*/
@layer component {
    /*
     * @group controls
     * @description Gemeinsame Theme-Werte fuer interaktive Formular-Controls wie Inputs, Selects, Buttons und Textareas.
     */
    :root {
        /*
         * @description Gemeinsamer Radius fuer Controls mit rechteckiger Flaeche.
         */
        --control-border-radius: var(--border-radius);
        /*
         * @description Standard-Hintergrund fuer Eingabefelder und Schaltflaechen.
         */
        --control-background: var(--background-darker-color);
        /*
         * @description Standard-Textfarbe fuer Controls.
         */
        --control-color: var(--text-color);
        /*
         * @description Standard-Border fuer feldartige Controls.
         */
        --control-border: var(--border);
        /*
         * @description Vertikales Innenpadding fuer normale Controls.
         */
        --control-padding-block: var(--space-xs);
        /*
         * @description Horizontales Innenpadding fuer Button-Controls.
         */
        --control-padding-inline: var(--space-s);
        /*
         * @description Horizontales Innenpadding fuer Feld-Controls.
         */
        --control-field-padding-inline: var(--space-xs);
        /*
         * @description Kantenlaenge fuer quadratische Icon-Controls.
         */
        --control-size: var(--size-l);
        /*
         * @description Kantenlaenge fuer kleine Icon-Controls.
         */
        --control-small-size: var(--size-m);
    }

    [is=input-control] {
        position: relative;
        display: inline-flex;
        width: 100%;

        [is=input] {
            padding-right: calc(var(--input-icon-gap, var(--space-xs)) + var(--input-icon-size, var(--size-m)));
        }
    }

    [is=input] {
        width: 100%;
        padding: var(--input-padding-block, var(--control-padding-block)) var(--input-padding-inline, var(--control-field-padding-inline));
        border: var(--input-border, var(--control-border));
        border-radius: var(--input-border-radius, var(--control-border-radius));
        background: var(--input-background, var(--control-background));
        color: var(--input-color, var(--control-color));

        &[type="date"] {
            &::-webkit-calendar-picker-indicator {
                color: var(--input-calendar-indicator-color, var(--foreground-color));
                opacity: 1;
                background-color: var(--input-calendar-indicator-color, var(--foreground-color));
                background-image: none;
                -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0%200%2024%2024' fill='black'%3e%3cpath d='M7%202v2H5a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6a2%202%200%200%200-2-2h-2V2h-2v2H9V2H7zm12%2018H5V9h14v11z'/%3e%3c/svg%3e");
                -webkit-mask-repeat: no-repeat;
                -webkit-mask-position: center;
                -webkit-mask-size: 16px 16px;
                mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0%200%2024%2024' fill='black'%3e%3cpath d='M7%202v2H5a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6a2%202%200%200%200-2-2h-2V2h-2v2H9V2H7zm12%2018H5V9h14v11z'/%3e%3c/svg%3e");
                mask-repeat: no-repeat;
                mask-position: center;
                mask-size: 16px 16px;
            }
        }

        &[type="time"],
        &[type="datetime-local"] {
            &::-webkit-calendar-picker-indicator {
                color: var(--input-calendar-indicator-color, var(--foreground-color));
                opacity: 1;
            }
        }

        &[now~=invalid] {
            border-color: var(--input-invalid-border-color, var(--error-color));
        }
    }

    [is=input-icon] {
        position: absolute;
        top: 50%;
        right: var(--input-icon-inset, var(--space-xs));
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--input-icon-size, var(--size-m));
        height: var(--input-icon-size, var(--size-m));
        color: var(--input-icon-color, var(--foreground-soft-color));
        pointer-events: none;
        transform: translateY(-50%);
    }
}