.messages-wrap {
  position: relative
}

.messages-wrap .messages {
  position: absolute;
  z-index: 210;
  top: 25%;
  left: 50%;
  width: 100%;
  transform: translateX(-50%)
}

.messages {
  margin: 0 auto;
  background-image: none !important
}

.message {
  position: relative;
  overflow-y: auto;
  width: 100%;
  max-height: 90vh;
  margin: .5rem auto;
  word-wrap: break-word;
  border: 1px solid;
  border-inline-start-width: .25rem;
  border-radius: 0;
  background-color: var(--color-white)
}

.message:last-child {
  margin-bottom: 0
}

.message__list {
  margin: 0;
  padding: .5rem 2rem;
  list-style: none
}

.message__item+.message__item {
  margin-top: 1rem
}

.message {
  color: var(--message-text-color);
  border-color: var(--color-messages)
}

.message__list {
  position: relative;
  background-color: hsla(var(--message-bg-color), .05)
}

.message__list::before {
  position: absolute;
  top: .5rem;
  width: 1rem;
  height: 1rem;
  content: "";
  background-image: var(--message-bg-image);
  background-size: 100% 100%;
  inset-inline-start: .5rem
}

.message--status {
  --message-text-color: var(--color-status);
  --message-bg-color: var(--color-status-hsl);
  --message-bg-image: url(../../assets/icons/svg/status/check.svg);
}

.message--warning {
  --message-text-color: var(--color-warning);
  --message-bg-color: var(--color-warning-hsl);
  --message-bg-image: url(../../assets/icons/svg/status/warning.svg);
}

.message--error {
  --message-text-color: var(--color-alert);
  --message-bg-color: var(--color-alert-hsl);
  --message-bg-image: url(../../assets/icons/svg/status/error.svg);
}

.message--error p.error {
  color: var(--color-alert)
}

.message__toggle-off {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  display: block;
  width: 1rem !important;
  height: 1rem !important;
  margin: .5rem !important;
  padding: 0;
  color: var(--color-messages);
  border: 0 !important;
  background: 0 0 !important;
  line-height: 1
}

.message__toggle-off svg {
  display: block;
  width: 1rem;
  height: 1rem
}

.message__toggle-off svg path {
  fill: currentColor
}

.message--is-off {
  display: none
}