.messages {
  position: relative;
  padding: var(--gin-spacing-m);
  border: 2px solid transparent;
  border-radius: var(--gin-border-l);
  opacity: 1;

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

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

  &, &-list {
    margin-block-start: 0;
  }

  &-list {
    margin-block-end: 0;
  }

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

  &__title {
    font-weight: var(--gin-font-weight-bold);
  }

  &__title,
  &__content {
    margin-inline-start: 2.125rem;
  }

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

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

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

  .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-color: transparent !important;
    box-shadow: none;

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

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

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

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

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

  // Hide our close button as Webform has it's own
  &--webform .button--dismiss {
    display: none;
  }

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

    .messages__header {
      background: none;

      &:before {
        background-color: var(--gin-color-info-light);
        mask-image: icon('info');
        mask-repeat: no-repeat;
        mask-position: center left;
      }
    }

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

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

    .messages__header {
      &:before {
        background-color: var(--gin-color-green-light);
        mask-image: icon('status');
        mask-repeat: no-repeat;
        mask-position: center left;
      }
    }

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

  }

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

    .messages__header {
      &:before {
        background-color: var(--gin-color-warning-light);
        mask-image: icon('warning');
        mask-repeat: no-repeat;
        mask-position: center left;
      }
    }

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

  &--error {
    color: var(--gin-color-danger-light);
    background: var(--gin-bg-danger);

    .messages__header {
      &:before {
        background-color: var(--gin-color-danger-light);
        mask-image: icon('error');
        mask-repeat: no-repeat;
        mask-position: center left;
      }
    }

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