/* Semantic feedback owns its paint before decorative theme layers. An error
   must remain an error in every page composition, including its child text. */
@layer printpass-feedback {
  body.pa-body {
    --pa-feedback-error: #a72032;
    --pa-feedback-error-bg: #fff1f2;
    --pa-feedback-error-border: #be394b;
    --pa-feedback-error-ring: rgba(167, 32, 50, .2);
    --pa-feedback-success: #165b37;
    --pa-feedback-success-bg: #edf8f1;
    --pa-feedback-success-border: #3b8c60;
    --pa-feedback-warning: #714a00;
    --pa-feedback-warning-bg: #fff7e3;
    --pa-feedback-warning-border: #a97412;
    --pa-feedback-info: #124b63;
    --pa-feedback-info-bg: #edf7fb;
    --pa-feedback-info-border: #467b91;
  }

  html[data-pa-theme="dark"] body.pa-body {
    --pa-feedback-error: #ffb4bb;
    --pa-feedback-error-bg: #381e29;
    --pa-feedback-error-border: #d16b7a;
    --pa-feedback-error-ring: rgba(255, 180, 187, .25);
    --pa-feedback-success: #a4e5bc;
    --pa-feedback-success-bg: #153429;
    --pa-feedback-success-border: #68b988;
    --pa-feedback-warning: #f8d58a;
    --pa-feedback-warning-bg: #382d18;
    --pa-feedback-warning-border: #c29b45;
    --pa-feedback-info: #a9d9ef;
    --pa-feedback-info-bg: #16313e;
    --pa-feedback-info-border: #689fb7;
  }

  body.pa-body :is(.alert-danger, .validation-summary-errors, .pa-product-feedback__status[data-state="error"]) {
    --pa-feedback-fg: var(--pa-feedback-error);
    --pa-feedback-bg: var(--pa-feedback-error-bg);
    --pa-feedback-border: var(--pa-feedback-error-border);
  }

  body.pa-body :is(.alert-success, .pa-product-feedback__status[data-state="success"], .pa-product-feedback__status.is-success:not([data-state="error"])) {
    --pa-feedback-fg: var(--pa-feedback-success);
    --pa-feedback-bg: var(--pa-feedback-success-bg);
    --pa-feedback-border: var(--pa-feedback-success-border);
  }

  body.pa-body .alert-warning {
    --pa-feedback-fg: var(--pa-feedback-warning);
    --pa-feedback-bg: var(--pa-feedback-warning-bg);
    --pa-feedback-border: var(--pa-feedback-warning-border);
  }

  body.pa-body :is(.alert-info, .pa-product-feedback__status:not([data-state="error"]):not([data-state="success"]):not(.is-success)) {
    --pa-feedback-fg: var(--pa-feedback-info);
    --pa-feedback-bg: var(--pa-feedback-info-bg);
    --pa-feedback-border: var(--pa-feedback-info-border);
  }

  body.pa-body :is(.alert-danger, .alert-success, .alert-warning, .alert-info, .validation-summary-errors, .pa-product-feedback__status) {
    --bs-alert-color: var(--pa-feedback-fg);
    --bs-alert-bg: var(--pa-feedback-bg);
    --bs-alert-border-color: var(--pa-feedback-border);
    color: var(--pa-feedback-fg) !important;
    background: var(--pa-feedback-bg) !important;
    border: 1px solid var(--pa-feedback-border) !important;
    border-inline-start-width: .25rem !important;
    border-radius: .5rem !important;
    padding: .9rem 1rem !important;
    max-width: 100%;
    min-width: 0;
    line-height: 1.5 !important;
    overflow-wrap: anywhere;
    text-shadow: none !important;
    box-shadow: none !important;
  }

  body.pa-body :is(.alert-danger, .alert-success, .alert-warning, .alert-info).alert-dismissible {
    padding-inline-end: 3.5rem !important;
  }

  body.pa-body :is(.alert-danger, .alert-success, .alert-warning, .alert-info, .validation-summary-errors, .pa-product-feedback__status)
    :is(h1, h2, h3, h4, h5, h6, p, ul, ol, li, span, strong, b, small, i, a:not(.btn)) {
    color: var(--pa-feedback-fg) !important;
    background: transparent !important;
    text-shadow: none !important;
  }

  body.pa-body :is(.alert-danger, .alert-success, .alert-warning, .alert-info, .validation-summary-errors, .pa-product-feedback__status) a:not(.btn) {
    text-decoration: underline;
    text-underline-offset: .15em;
  }

  body.pa-body .validation-summary-errors ul {
    margin: 0;
    padding-inline-start: 1.25rem;
  }

  body.pa-body :is(.field-validation-error, .invalid-feedback, .pa-file-limit-error, .pa-community-inline-status.is-error),
  body.pa-body form .text-danger:not(.btn, button, a, .alert, .validation-summary-errors) {
    color: var(--pa-feedback-error) !important;
    background: transparent !important;
    font-size: .875rem !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere;
    text-shadow: none !important;
  }

  body.pa-body :is(.field-validation-error, .invalid-feedback, .pa-file-limit-error, .pa-community-inline-status.is-error) :is(span, strong, b, small) {
    color: inherit !important;
    background: transparent !important;
  }

  body.pa-body .pa-community-inline-status:not(.is-error) {
    color: var(--pa-feedback-success) !important;
    font-size: .875rem !important;
    line-height: 1.5 !important;
  }

  /* Do not flag untouched required fields or make empty validation slots visible. */
  body.pa-body :is(.field-validation-valid, .validation-summary-valid) {
    display: none !important;
  }

  body.pa-body :is(input, select, textarea):is(.input-validation-error, .is-invalid, [aria-invalid="true"]) {
    border-color: var(--pa-feedback-error-border) !important;
  }

  body.pa-body :is(input, select, textarea):is(.input-validation-error, .is-invalid, [aria-invalid="true"]):focus {
    box-shadow: 0 0 0 .2rem var(--pa-feedback-error-ring) !important;
    outline-color: var(--pa-feedback-error-border) !important;
  }
}