/*
 * 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.
 */

:root {
  /* Color variables */
  --color-white: #ffffff;
  --color-sunglow: #ffcc02;

  /* Spacing variables */
  --space-s: 0.5rem;
  --space-l: 1.5rem;

  /* Gin theme variables */
  --gin-font: Ginter, Inter, "Helvetica Neue", BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
  --gin-font-weight-bold: 575;
  --gin-border-l: .75rem;
  --gin-border-m: .5rem;
  --gin-border-color-layer: rgba(0, 0, 0, .08);
  --gin-transition-fast: .3s cubic-bezier(.19, 1, .22, 1);
  --gin-transition: .15s cubic-bezier(.19, 1, .22, 1);
  --gin-spacing-xs: .5rem;
  --gin-spacing-s: .75rem;
  --gin-bg-app: #fff;

  /* Info message colors */
  --gin-color-info-light: #589ac5;
  --gin-bg-info: #122b3c;

  /* Success message colors */
  --gin-color-green-light: #32cea4;
  --gin-bg-green: #145242;

  /* Warning message colors */
  --gin-color-warning-light: #efcf64;
  --gin-bg-warning: #483e1e;

  /* Error message colors */
  --gin-color-danger-light: #f39b9d;
  --gin-bg-danger: #583333;

  /* Existing variables */
  --messages-bg-color: #353641;
  --messages-fg-color: var(--color-white);
  --messages-border-radius: 2px;
  --messages-border-width: 0.3125rem;
  --messages--status-color: #42a877;
  --messages--warning-color: #e0ac00;
  --messages--error-color: #e34f4f;
  --messages__link-color: var(--color-sunglow);
  --messages__link--hover-color: var(--color-white);
  --messages__icon-size: 1rem;
  --messages__text-margin: calc(var(--messages__icon-size) + var(--space-l));

  --font-size-base: 1rem;
  --space-m: 1rem;
}

.messages-list {
  margin-block: calc(var(--space-m) + var(--space-l));
  padding: 0;
  list-style: none;
  position: fixed;
  right: 30px;
  top: 100px;
  z-index: 10000;
}

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

.messages {
  overflow: auto; /* Required to prevent text clipping. */
  box-sizing: border-box;
  margin-block: var(--space-m);
  padding: 16px 60px 16px 16px;
  color: var(--messages-fg-color);
  background-color: var(--messages-bg-color);
  font-family: var(--gin-font) !important;
  letter-spacing: normal !important;
  position: relative;
  border: 2px solid transparent;
  border-radius: var(--gin-border-l);
  transition: opacity var(--gin-transition-fast);
  opacity: 1;
}

.messages a {
  -webkit-text-decoration: underline;
  text-decoration: underline;
  color: var(--messages__link-color);
}

.messages a:hover {
  color: var(--messages__link--hover-color);
}

.messages pre {
  margin: 0;
}

[dir="rtl"] .messages {
  border-right-width: var(--messages-border-width);
  border-left-width: 0;
}

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

.messages--error .messages__header {
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 14 14'%3e%3cpath d='M3 11.193L11.45 3' stroke='%23e34f4f' stroke-width='2'/%3e%3ccircle cx='7' cy='7' r='6' fill='none' stroke='%23e34f4f' stroke-width='2'/%3e%3c/svg%3e") no-repeat center left;
}

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

.messages--status .messages__header {
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 13'%3e%3cpath d='M2 6.571L5.6 10 14 2' fill='none' stroke='%2342a877' stroke-width='3'/%3e%3c/svg%3e") no-repeat center left;
}

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

.messages--warning .messages__header {
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 4 14' fill='%23e0ac00'%3e%3cpath d='M.5 0h3v9h-3z'/%3e%3ccircle cx='2' cy='12.5' r='1.5'/%3e%3c/svg%3e") no-repeat center left;
}

.messages__title {
  margin-block: 0;
  margin-inline: var(--messages__text-margin) 0;
  font-size: var(--font-size-base) !important;
  line-height: var(--font-size-base) !important;
  letter-spacing: normal !important;
}

.messages__header {
  display: flex;
  align-items: center;
  margin-block-end: var(--space-m);
}

[dir="rtl"] .messages__header {
  background-position: center right;
}

@media screen and (min-width: 48rem) {
  .messages__content {
    margin-inline-start: var(--messages__text-margin);
  }
}

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

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

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

.messages, .messages-list {
  margin-block-start: 0;
}

.messages-list {
  margin-block-end: 0;
}

.messages a, .messages a:hover, .messages a:active {
  color: #fff;
}

.messages__title {
  font-weight: var(--gin-font-weight-bold);
}

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

.messages__content {
  font-size: var(--font-size-base);
}

.messages .messages__header {
  position: relative;
  background-image: none;
  margin-block-end: var(--gin-spacing-xs);
  margin-inline-end: 1.5em;
}

.messages .messages__header:before {
  content: "";
  display: block;
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 0;
  width: 1.5rem;
  height: 1.5rem;
}

@media (forced-colors: active) {
  .messages .messages__header:before {
    background-color: linktext !important;
  }
}

.messages .button--dismiss {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  margin: var(--gin-spacing-s);
  padding: 0;
  height: 29px;
  width: 29px;
  color: transparent;
  text-indent: -99999px;
  border-radius: var(--gin-border-m);
  border: 2px solid transparent !important;
  transition: var(--gin-transition);
  box-shadow: none;
  background: none;
}

.messages .button--dismiss:hover:not(:focus) {
  color: transparent;
  background-color: transparent !important;
  border: 2px solid #fff !important;
}

.messages .button--dismiss:focus .icon-close, .messages .button--dismiss:hover:focus .icon-close {
  background-color: var(--gin-bg-app);
}

.messages .button--dismiss .icon-close {
  height: 100%;
  width: 100%;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  -webkit-mask-image: url("../images/sprite.svg#close-view");
  mask-image: url("../images/sprite.svg#close-view");
  -webkit-mask-size: 16px 16px;
  mask-size: 16px 16px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: #fff;
}

@media (forced-colors: active) {
  .messages .button--dismiss .icon-close {
    background-color: buttonBorder;
  }
}

.messages--webform .button--dismiss {
  display: none;
}

.messages.messages--info {
  color: var(--gin-color-info-light);
  background: var(--gin-bg-info);
  border-color: var(--gin-bg-info);
}

.messages.messages--info .messages__header {
  background: none;
}

.messages.messages--info .messages__header:before {
  background-color: var(--gin-color-info-light);
  -webkit-mask-image: url("../images/sprite.svg#info-view");
  mask-image: url("../images/sprite.svg#info-view");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center left;
  mask-position: center left;
}

.messages.messages--info .button--dismiss .icon-close:link {
  background-color: var(--gin-color-info-light);
}

.messages.messages--status {
  color: var(--gin-color-green-light) !important;
  background: var(--gin-bg-green);
}

.messages.messages--status .messages__title {
  color: var(--gin-color-green-light) !important;
}

.messages.messages--status .messages__header:before {
  background-color: var(--gin-color-green-light) !important;
  -webkit-mask-image: url("../images/sprite.svg#status-view");
  mask-image: url("../images/sprite.svg#status-view");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center left;
  mask-position: center left;
}

.messages.messages--status .button--dismiss .icon-close:link {
  background-color: var(--gin-color-green-light) !important;
}

.messages.messages--warning {
  color: var(--gin-color-warning-light);
  background: var(--gin-bg-warning);
}

.messages.messages--warning .messages__title {
  color: var(--gin-color-warning-light) !important;
}

.messages.messages--warning .messages__header:before {
  background-color: var(--gin-color-warning-light);
  -webkit-mask-image: url("../images/sprite.svg#warning-view");
  mask-image: url("../images/sprite.svg#warning-view");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center left;
  mask-position: center left;
}

.messages.messages--warning .button--dismiss .icon-close:link {
  background-color: var(--gin-color-warning-light);
}

.messages--error {
  color: var(--gin-color-danger-light);
  background: var(--gin-bg-danger);
}

.messages.messages--error .messages__title {
  color: var(--gin-color-danger-light) !important;
}

.messages--error .messages__header:before {
  background-color: var(--gin-color-danger-light);
  -webkit-mask-image: url("../images/sprite.svg#error-view");
  mask-image: url("../images/sprite.svg#error-view");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center left;
  mask-position: center left;
}

.messages--error .button--dismiss .icon-close:link {
  background-color: var(--gin-color-danger-light);
}