/**
 * @file
 * Messages: the error summary, and the other types as callouts.
 */

:where(.gdrfad-dds) .dds-messages,
.gdrfad-dds-embedded .dds-messages {
  display: flex;
  flex-direction: column;
  gap: var(--gap-gap-md);
}

:where(.gdrfad-dds) .dds-error-summary,
.gdrfad-dds-embedded .dds-error-summary {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-gap-md);
  padding: var(--padding-padding-lg);
  border: 2px solid var(--error-error);
  border-radius: var(--radius-sm);
  background: var(--error-error-variant);
  color: var(--error-on-error-variant);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
}

/* Focus is moved here after a failed step; show where it landed. */
:where(.gdrfad-dds) .dds-error-summary:focus,
.gdrfad-dds-embedded .dds-error-summary:focus {
  outline: 2px solid var(--error-error);
  outline-offset: 2px;
}

:where(.gdrfad-dds) .dds-error-summary__icon,
.gdrfad-dds-embedded .dds-error-summary__icon {
  inline-size: 22px;
  block-size: 22px;
  margin-block-start: 1px;
  color: var(--error-error);
}

:where(.gdrfad-dds) .dds-error-summary__body,
.gdrfad-dds-embedded .dds-error-summary__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--gap-gap-xs);
  min-inline-size: 0;
}

:where(.gdrfad-dds) .dds-error-summary__title,
.gdrfad-dds-embedded .dds-error-summary__title {
  color: inherit;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

:where(.gdrfad-dds) .dds-error-summary__messages,
.gdrfad-dds-embedded .dds-error-summary__messages {
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
}

:where(.gdrfad-dds) .dds-error-summary__list,
.gdrfad-dds-embedded .dds-error-summary__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: var(--gap-gap-xs) 0 0;
  padding: 0;
  list-style: none;
}

:where(.gdrfad-dds) .dds-error-summary a,
.gdrfad-dds-embedded .dds-error-summary a {
  color: var(--error-on-error-variant);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

:where(.gdrfad-dds) .dds-error-summary a:hover,
.gdrfad-dds-embedded .dds-error-summary a:hover {
  color: var(--error-on-error-variant);
  text-decoration-thickness: 2px;
}

/* Messages built in JS by core (Drupal.theme.message) keep core markup. */
:where(.gdrfad-dds) .messages,
.gdrfad-dds-embedded .messages {
  padding: var(--padding-padding-lg);
  border: 1px solid var(--info-info);
  border-radius: var(--radius-sm);
  background: var(--info-info-variant);
  color: var(--info-on-info-variant);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
}

:where(.gdrfad-dds) .messages--status,
.gdrfad-dds-embedded .messages--status {
  border-color: var(--success-success);
  background: var(--success-success-variant);
  color: var(--success-on-success-variant);
}

:where(.gdrfad-dds) .messages--warning,
.gdrfad-dds-embedded .messages--warning {
  border-color: var(--warning-warning);
  background: var(--warning-warning-variant);
  color: var(--warning-on-warning-variant);
}

:where(.gdrfad-dds) .messages--error,
.gdrfad-dds-embedded .messages--error {
  border: 2px solid var(--error-error);
  background: var(--error-error-variant);
  color: var(--error-on-error-variant);
}

:where(.gdrfad-dds) .messages + .messages,
.gdrfad-dds-embedded .messages + .messages {
  margin-block-start: var(--gap-gap-md);
}