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

.messages {
  border: 1px solid;
  border-radius: 2px;
  padding: 1rem 2rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

[dir="rtl"] .messages {
  text-align: right;
}

.messages + .messages {
  margin-top: 1.538em;
}

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

.messages__item + .messages__item {
  margin-top: 0.769em;
}

.messages--status {
  color: #325e1c;
  background-color: #f3faef;
  border-color: #c9e1bd;
  box-shadow: -8px 0 0 #77b259;
}

[dir="rtl"] .messages--status {
  box-shadow: 8px 0 0 #77b259;
  margin-left: 0;
}

.messages--warning {
  background-color: #fdf8ed;
  border-color: #f4daa6;
  color: #734c00;
  box-shadow: -8px 0 0 #e09600;
}

[dir="rtl"] .messages--warning {
  box-shadow: 8px 0 0 #e09600;
}

.messages--error {
  background-color: #fcf4f2;
  color: #a51b00;
  border-color: #f9c9bf;
  box-shadow: -8px 0 0 #e62600;
}

[dir="rtl"] .messages--error {
  box-shadow: 8px 0 0 #e62600;
}

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

/* Following 2 rules copied from Gin */
.messages .button--dismiss {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  margin: 0.75rem;
  padding: 0;
  height: 34px;
  width: 34px;
  color: transparent;
  text-indent: -99999px;
  background: transparent;
  border-radius: 0.5rem;
  border-color: transparent;
  transition: .15s cubic-bezier(.19, 1, .22, 1);
}

.messages .button--dismiss .icon-close {
  height: 100%;
  width: 100%;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  /* Icon for close button - it it breaks, fix URL */
  -webkit-mask-image: url(../../../contrib/gin/dist/media/sprite.svg#close-view);
  mask-image: url(../../../contrib/gin/dist/media/sprite.svg#close-view);
  -webkit-mask-size: 24px 24px;
  mask-size: 24px 24px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: #333;
}

.messages .button--dismiss:hover:not(:focus) {
  border-color: #333;
}