/**
 * @file
 * Styles for system messages.
 */

[data-drupal-messages] {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}

.sec-required-toast-wrapper[data-drupal-messages] {
  left: auto;
  right: 24px;
}

.messages {
  position: relative;
  margin: 0;
  padding: 14px 18px;
  border: 1px solid transparent;
  border-radius: 14px;
  background-image: none;
  box-shadow: 0 10px 30px rgba(14, 9, 22, 0.18);
  backdrop-filter: blur(10px);
  pointer-events: auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
  animation: sec-toast-in 260ms ease-out both;
}

.messages + .messages {
  margin-top: 0;
}

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

.messages__item + .messages__item {
  margin-top: 8px;
}

.messages--status {
  color: #1f5b30;
  border-color: #badab8;
  background-color: rgba(241, 250, 240, 0.95);
}

.messages--warning {
  color: #734c00;
  border-color: #f4daa6;
  background-color: rgba(253, 248, 237, 0.95);
}

.messages--error {
  color: #a51b00;
  border-color: #f9c9bf;
  background-color: rgba(252, 244, 242, 0.95);
}

.messages--error p.error {
  color: #a51b00;
}

@media (max-width: 767px) {
  [data-drupal-messages] {
    top: 14px;
    left: 14px;
    width: calc(100vw - 28px);
  }

  .sec-required-toast-wrapper[data-drupal-messages] {
    left: auto;
    right: 14px;
  }
}

@keyframes sec-toast-in {
  from {
    opacity: 0;
    transform: translateX(56px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}