/*
 * Design system v2 — input states (round 26, UIX-3).
 * Colour, border colour, radius, ring, opacity and motion only: no size or
 * typography property (gate UiV2NoSizeTest). Tokens come from tokens.css; the
 * resting --sc-input-bg / --sc-input-border are read, never set, so local
 * scopes (Creator, dark auth block) keep working.
 * Admin fields live under .siteclick-container, panel fields under .np-field
 * and .sc-np-esf-field (this file also loads in the node panel).
 * States: error = .siteclick-form-component.error or [aria-invalid="true"];
 * success = [data-sc-state="success"]; loading = [aria-busy="true"] on the
 * wrapper (the ring itself is drawn by ui-loader.css).
 */

/* ---- Text fields, selects, textareas ---------------------------------- */

/* Specificity mirrors sc-brand.css (.siteclick-container :is(…):not(…)) so the
   later file wins at rest, and every state below adds one class or pseudo. */
.siteclick-container :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=submit], [type=button], [type=file], [type=range]), textarea, select):not(.siteclick-sidebar-footer-in *, .sc-creator-description, .sc-composer-input),
.np-field :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=range]), textarea, select),
.sc-np-esf-field :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=range]), textarea, select) {
    border-radius: var(--sc-radius-md);
    transition: border-color var(--sc-dur-fast) var(--sc-ease-out), box-shadow var(--sc-dur-fast) var(--sc-ease-out), opacity var(--sc-dur-fast) var(--sc-ease-out);
}

.siteclick-container :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=submit], [type=button], [type=file], [type=range]), textarea, select):not(.siteclick-sidebar-footer-in *, .sc-creator-description, .sc-composer-input):hover,
.np-field :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=range]), textarea, select):hover,
.sc-np-esf-field :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=range]), textarea, select):hover {
    border-color: var(--sc-color-border-strong);
}

.siteclick-container :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=submit], [type=button], [type=file], [type=range]), textarea, select):not(.siteclick-sidebar-footer-in *, .sc-creator-description, .sc-composer-input):is(:focus-visible, :active),
.np-field :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=range]), textarea, select):is(:focus-visible, :active),
.sc-np-esf-field :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=range]), textarea, select):is(:focus-visible, :active) {
    border-color: var(--sc-color-primary);
    box-shadow: var(--sc-ring);
    outline: none;
}

.siteclick-container :is(input, textarea, select):disabled,
.np-field :is(input, textarea, select):disabled,
.sc-np-esf-field :is(input, textarea, select):disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Error: the wrapper class set by @error, or aria-invalid on the field. */
.siteclick-container .siteclick-form-component.error :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=submit], [type=button], [type=file], [type=range]), textarea, select):not(.siteclick-sidebar-footer-in *, .sc-creator-description, .sc-composer-input),
.siteclick-container :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=submit], [type=button], [type=file], [type=range]), textarea, select)[aria-invalid="true"]:not(.siteclick-sidebar-footer-in *, .sc-creator-description, .sc-composer-input),
.np-field :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=range]), textarea, select)[aria-invalid="true"],
.sc-np-esf-field :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=range]), textarea, select)[aria-invalid="true"] {
    border-color: var(--sc-color-danger);
    box-shadow: var(--sc-ring-error);
}
.siteclick-container .feedback-error,
.np-field .feedback-error {
    color: var(--sc-color-danger);
}

/* Success: flashed on the field or on its wrapper. */
.siteclick-container :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=submit], [type=button], [type=file], [type=range]), textarea, select)[data-sc-state="success"]:not(.siteclick-sidebar-footer-in *, .sc-creator-description, .sc-composer-input),
.siteclick-container .siteclick-form-component[data-sc-state="success"] :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=submit], [type=button], [type=file], [type=range]), textarea, select):not(.siteclick-sidebar-footer-in *, .sc-creator-description, .sc-composer-input),
.np-field :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=range]), textarea, select)[data-sc-state="success"],
.np-field[data-sc-state="success"] :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=range]), textarea, select),
.sc-np-esf-field :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=range]), textarea, select)[data-sc-state="success"],
.sc-np-esf-field[data-sc-state="success"] :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=range]), textarea, select) {
    border-color: var(--sc-color-green);
    box-shadow: var(--sc-ring-success);
}

/* Loading: the wrapper anchors the xs ring that ui-loader.css draws. */
.siteclick-container .siteclick-form-component[aria-busy="true"] {
    position: relative;
    cursor: progress;
}

/* ---- Checkbox and radio ---------------------------------------------- */

.siteclick-container input[type=checkbox],
.np-field input[type=checkbox],
.sc-np-esf-field input[type=checkbox] {
    border-radius: var(--sc-radius-sm);
    transition: border-color var(--sc-dur-fast) var(--sc-ease-out), box-shadow var(--sc-dur-fast) var(--sc-ease-out);
}
.siteclick-container input[type=checkbox]:checked::before,
.np-field input[type=checkbox]:checked::before,
.sc-np-esf-field input[type=checkbox]:checked::before {
    border-radius: var(--sc-radius-sm);
    animation: sc-input-check-in var(--sc-dur-fast) var(--sc-ease-out);
}
.siteclick-container input[type=radio],
.np-field input[type=radio],
.sc-np-esf-field input[type=radio] {
    border-radius: 50%;
    transition: border-color var(--sc-dur-fast) var(--sc-ease-out), box-shadow var(--sc-dur-fast) var(--sc-ease-out);
}
.siteclick-container :is(input[type=checkbox], input[type=radio]):hover,
.np-field :is(input[type=checkbox], input[type=radio]):hover,
.sc-np-esf-field :is(input[type=checkbox], input[type=radio]):hover {
    border-color: var(--sc-color-border-strong);
}
.siteclick-container :is(input[type=checkbox], input[type=radio]):focus-visible,
.np-field :is(input[type=checkbox], input[type=radio]):focus-visible,
.sc-np-esf-field :is(input[type=checkbox], input[type=radio]):focus-visible {
    border-color: var(--sc-color-primary);
    box-shadow: var(--sc-ring);
}
.siteclick-container :is(input[type=checkbox], input[type=radio]):disabled,
.np-field :is(input[type=checkbox], input[type=radio]):disabled,
.sc-np-esf-field :is(input[type=checkbox], input[type=radio]):disabled {
    opacity: .5;
    cursor: not-allowed;
}
.siteclick-container .siteclick-form-component.error :is(input[type=checkbox], input[type=radio]),
.siteclick-container :is(input[type=checkbox], input[type=radio])[aria-invalid="true"] {
    border-color: var(--sc-color-danger);
}

@keyframes sc-input-check-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---- Switches -------------------------------------------------------- */

/* Admin switch: .siteclick-switch, bare or inside the .sc-switch wrapper. */
.siteclick-container .siteclick-switch,
.siteclick-container .siteclick-switch-in {
    border-radius: var(--sc-radius-full);
}
.siteclick-container .siteclick-switch {
    transition: background-color var(--sc-dur-fast) var(--sc-ease-out), border-color var(--sc-dur-fast) var(--sc-ease-out), box-shadow var(--sc-dur-fast) var(--sc-ease-out);
}
.siteclick-container .siteclick-switch-in {
    transition: left var(--sc-dur-base) var(--sc-ease-out);
}
.siteclick-container .siteclick-switch:not(.active):hover {
    background: var(--sc-color-surface-alt);
    border-color: var(--sc-color-border-strong);
}
.siteclick-container .siteclick-switch.active:hover,
.siteclick-container input:checked + .siteclick-switch:hover,
.siteclick-container input:checked + div .siteclick-switch:hover {
    background: var(--sc-color-primary-hover) !important;
    border-color: var(--sc-color-primary-hover);
}
/* Focus ring on every switch form; replaces the outline of the wrapper form. */
.siteclick-switch:focus-visible,
input:focus-visible + .siteclick-switch,
input:focus-visible + div .siteclick-switch,
.sc-switch input[type="checkbox"]:focus-visible + .siteclick-switch,
.sc-switch input[type="checkbox"]:focus-visible + div .siteclick-switch {
    outline: none;
    box-shadow: var(--sc-ring);
}
.siteclick-container input:disabled + .siteclick-switch,
.siteclick-container input:disabled + div .siteclick-switch,
.siteclick-container .siteclick-switch.disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Panel switch: np-fields.css paints it with !important, so this does too. */
.sc-np-switch,
:root .sc-np-switch,
:root .sc-np-switch .sc-np-switch-slider,
.np-tb-own .sc-np-switch .sc-np-switch-slider {
    border-radius: var(--sc-radius-full) !important;
}

/* Link picker 'new tab' switch (aria-checked driven) and the card chooser switch. */
:root .siteclick-ve-linkpick-blank [role="switch"],
:root .siteclick-ve-linkpick-blank [role="switch"]::after,
.siteclick-container .switch,
.siteclick-container .switch-in {
    border-radius: var(--sc-radius-full);
}
.siteclick-container .switch {
    background: var(--sc-color-surface-alt);
}
.siteclick-container .switch.active,
.siteclick-container .card-chooser input[type="radio"]:checked + div div.switch {
    background: var(--sc-color-primary) !important;
}
.sc-np-switch .sc-np-switch-slider {
    transition: left var(--sc-dur-base) var(--sc-ease-out), right var(--sc-dur-base) var(--sc-ease-out) !important;
}
.sc-np-switch:not(.-on):not(.is-disabled):hover {
    background: var(--sc-color-border-strong) !important;
}
.sc-np-switch:focus-visible,
.sc-np-switch:focus-within {
    outline: none;
    box-shadow: var(--sc-ring);
}
.sc-np-switch.is-disabled {
    cursor: not-allowed;
}