/* Soft glow that grows smoothly when any input field is focused.
   Loaded last. Only box-shadow / border-color change: no padding, border-width, height or transform changes. */
html {
  --fg-ring: color-mix(in srgb, var(--vxp-highlight, #d4d4d4) 26%, transparent);
  --fg-near: color-mix(in srgb, var(--vxp-highlight, #d4d4d4) 34%, transparent);
  --fg-far: color-mix(in srgb, var(--vxp-highlight, #d4d4d4) 15%, transparent);
  /* One frame only: the field's own border plus a soft blurred glow. No solid spread ring (it looked like a second border). */
  --fg-glow: 0 0 0 0 transparent, 0 0 20px 2px var(--fg-near), 0 0 44px 6px var(--fg-far);
  --fg-glow-touch: 0 0 0 0 transparent, 0 0 14px 1px var(--fg-near);
  --fg-rest: 0 0 0 0 transparent, 0 0 0 0 transparent, 0 0 0 0 transparent;
  --fg-rest-touch: 0 0 0 0 transparent, 0 0 0 0 transparent;
  --fg-transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
html[data-theme="light"] {
  --fg-ring: color-mix(in srgb, var(--vxp-highlight, #595959) 22%, transparent);
  --fg-near: color-mix(in srgb, var(--vxp-highlight, #595959) 30%, transparent);
  --fg-far: color-mix(in srgb, var(--vxp-highlight, #595959) 13%, transparent);
}

/* ---- Smooth transition on every field and ring-drawing wrapper (focus in and out) ---- */
html:not(#fgx) :is(input:not(:where([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="color"], [type="range"])),
  textarea, select, .bl-select-trigger, .address-input, .mail-search, .language-search,
  .compose-field, .compose-recipient-field, .password-field, .phone-field, .billing-input-row input),
html:not(#fgx) .compose-window .compose-field,
html:not(#fgx) .settings-function :is(input, select) {
  transition: var(--fg-transition) !important;
  transition-property: border-color, box-shadow, background-color !important;
  transition-duration: .3s !important;
  transition-timing-function: ease !important;
}

/* ---- Rest + hover: no glow (hover keeps its border-color rule from the older CSS) ---- */
html:not(#fgx) :is(input:not(:where([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="color"], [type="range"])),
  textarea, select, .bl-select-trigger, .billing-input-row input):not(:focus):not(:focus-visible):not([aria-expanded="true"]),
html:not(#fgx) :is(.address-input, .mail-search, .language-search, .compose-field, .compose-recipient-field,
  .password-field, .phone-field):not(:focus-within),
html:not(#fgx) .compose-window .compose-field:not(:focus-within),
html:not(#fgx) .settings-function :is(input, select):not(:focus) {
  box-shadow: var(--fg-rest) !important;
}

/* ---- Focus: bigger glow fades in ---- */
html:not(#fgx) :is(input:not(:where([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="color"], [type="range"])),
  textarea, select, .billing-input-row input):focus,
html:not(#fgx) :is(input:not(:where([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="color"], [type="range"])),
  textarea, select, .billing-input-row input):focus-visible,
html:not(#fgx) .bl-select-trigger:is(:focus, :focus-visible, [aria-expanded="true"]),
html:not(#fgx) :is(.address-input, .mail-search, .language-search, .compose-field, .compose-recipient-field,
  .password-field, .phone-field):focus-within,
html:not(#fgx) .compose-window .compose-field:focus-within,
html:not(#fgx) .settings-function :is(input, select):is(:focus, :focus-visible),
html:not(#fgx) .billing-field input:is(:focus, :focus-visible) {
  outline: none !important;
  border-color: var(--vxp-highlight, var(--highlight, #d4d4d4)) !important;
  box-shadow: var(--fg-glow) !important;
  transform: none !important;
}

/* ---- One ring only: inputs inside a ring-drawing wrapper stay flat and transparent ---- */
html:not(#fgx) :is(.address-input, .mail-search, .language-search, .compose-field, .compose-recipient-field,
  .password-field, .phone-field, .bl-picker .language-search) :is(input, textarea, select):is(:hover, :focus, :focus-visible, :active) {
  box-shadow: none !important;
  outline: none !important;
  border-color: transparent !important;
  background: transparent !important;
  transform: none !important;
}

/* ---- Touch: smaller but still smooth glow instead of none ---- */
html:not(#fgx).touch-input :is(input:not(:where([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="color"], [type="range"])),
  textarea, select, .bl-select-trigger, .address-input, .mail-search, .language-search,
  .compose-field, .compose-recipient-field, .password-field, .phone-field, .billing-input-row input) {
  transition-property: border-color, box-shadow, background-color !important;
  transition-duration: .25s !important;
  transition-timing-function: ease !important;
}
html:not(#fgx).touch-input :is(input:not(:where([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="color"], [type="range"])),
  textarea, select, .bl-select-trigger, .billing-input-row input):not(:focus):not(:focus-visible):not([aria-expanded="true"]),
html:not(#fgx).touch-input :is(.address-input, .mail-search, .language-search, .compose-field, .compose-recipient-field,
  .password-field, .phone-field):not(:focus-within),
html:not(#fgx).touch-input .compose-window .compose-field:not(:focus-within),
html:not(#fgx).touch-input .settings-function :is(input, select):not(:focus) {
  box-shadow: var(--fg-rest-touch) !important;
}
html:not(#fgx).touch-input :is(input:not(:where([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="color"], [type="range"])),
  textarea, select, .billing-input-row input):is(:focus, :focus-visible),
html:not(#fgx).touch-input .bl-select-trigger:is(:focus, :focus-visible, [aria-expanded="true"]),
html:not(#fgx).touch-input :is(.address-input, .mail-search, .language-search, .compose-field, .compose-recipient-field,
  .password-field, .phone-field):focus-within,
html:not(#fgx).touch-input .compose-window .compose-field:focus-within,
html:not(#fgx).touch-input .settings-function :is(input, select):is(:focus, :focus-visible) {
  border-color: var(--vxp-highlight, var(--highlight, #d4d4d4)) !important;
  box-shadow: var(--fg-glow-touch) !important;
  transform: none !important;
}
html:not(#fgx).touch-input :is(.address-input, .mail-search, .language-search, .compose-field, .compose-recipient-field,
  .password-field, .phone-field) :is(input, textarea, select):is(:hover, :focus, :focus-visible, :active) {
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html:not(#fgx) :is(input, textarea, select, .bl-select-trigger, .address-input, .mail-search, .language-search,
    .compose-field, .compose-recipient-field, .password-field, .phone-field) {
    transition-duration: .01s !important;
  }
}