/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * Messages.
 *
 * @todo revisit this after https://www.drupal.org/project/drupal/issues/3078400
 *   has been resolved.
 */

.messages-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.field .messages-list,
.form-wrapper .messages-list {
  margin-block-end: 0;
}

.messages {
  --messages-bg-color: #353641;
  /* Fixed white: text on the always-dark message banner (--messages-bg-color). */
  --messages-fg-color: var(--admin-color-white);
  --messages-icon: none;

  position: relative;
  overflow: auto; /* Required to prevent text clipping. */
  box-sizing: border-box;
  padding: var(--admin-space-m);
  opacity: 1;
  color: var(--messages-fg-color);
  border: 2px solid transparent;
  border-radius: var(--admin-radius-l);
  background-color: var(--messages-bg-color);
  margin-block: 0 var(--admin-space-m);

  a {
    &,
    &:hover,
    &:active {
      color: #fff;
    }
  }

  pre {
    margin: 0;
  }

  .gin--dark-mode & {
    box-shadow: 0 6px 16px var(--admin-color-border-soft);
  }

  /* If Layout Builder form is active, remove background images. */
  .layout-builder__message--defaults &,
  .layout-builder__message--overrides & {
    background-image: none;
  }

  .button--dismiss {
    position: absolute;
    width: 1.8125rem;
    height: 1.8125rem;
    margin: var(--admin-space-s);
    padding: 0;
    text-indent: -6249.9375rem;
    color: transparent;
    border-color: transparent;
    border-radius: var(--admin-radius-m);
    box-shadow: none;
    inset-block-start: 0;
    inset-inline-end: 0;

    &:focus {
      background-color: transparent;
    }

    &:hover:not(:focus) {
      color: transparent;
      border-color: #fff;
      background-color: transparent;
    }

    .icon-close {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #fff;
      inset-block-start: 0;
      inset-inline-start: 0;
      mask-image: var(--admin-icon-close);
      mask-size: 1rem 1rem;
      mask-repeat: no-repeat;
      mask-position: center;

      @media (forced-colors: active) {
        background-color: buttonBorder;
      }
    }

    @media (prefers-reduced-motion: no-preference) {
      transition: var(--admin-transition);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    transition: opacity var(--admin-transition-slow);
  }
}

/*
 * Message banners use a dark-tinted background with a light status-colored
 * foreground (same in light and dark mode). These specific tints are scoped to
 * the component rather than the global token API — only messages use this
 * dark-banner treatment. The global status semantics (light tint + dark text)
 * are --admin-color-bg-* / --admin-color-text-*.
 */

.messages--error {
  --messages-bg-color: #583333;
  --messages-fg-color: #f39b9d;
  --messages-icon: var(--admin-icon-error);
}

.messages--status {
  --messages-bg-color: #145242;
  --messages-fg-color: #32cea4;
  --messages-icon: var(--admin-icon-status);
}

.messages--warning {
  --messages-bg-color: #483e1e;
  --messages-fg-color: #efcf64;
  --messages-icon: var(--admin-icon-warning);
}

.messages--info {
  --messages-bg-color: #122b3c;
  --messages-fg-color: #589ac5;
  --messages-icon: var(--admin-icon-info);
}

.messages__title {
  margin-block: 0;
  margin-inline: 2.125rem 0;
  font-size: var(--admin-font-size-m);
  font-weight: var(--admin-font-weight-bold);
}

.messages__header {
  position: relative;
  display: flex;
  align-items: center;
  margin-block-end: var(--admin-space-xs);
  margin-inline-end: 1.5em;

  &::before {
    position: absolute;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    content: "";
    inset-block-start: 2px;
    inset-inline-start: 0;
    mask-image: var(--messages-icon);
    mask-repeat: no-repeat;
    mask-position: center left;
    background-color: var(--messages-fg-color);

    &:dir(rtl) {
      mask-position: center right;
    }

    /* If no icon, then remove the pseudo-element. */
    @container style(--messages-icon: none) {
      content: none;
    }

    @media (forced-colors: active) {
      background-color: linktext;
    }
  }
}

.messages__content {
  margin-inline-start: 2.125rem;
}

.messages__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.messages__item + .messages__item {
  margin-block-start: var(--admin-space-s);
}