.alert,
.m_alert {
  padding: 0.66em;
  margin-bottom: 10px;
  border-radius: 4px;
  border: 1px solid transparent;
}
.m_alert {
  font-size: 125%;

  h3 {
    margin-bottom: 4px;
    &:last-child { margin-bottom: 0; }
  }

  &.error-summary {
    .filter-hidden + h3 {
      margin-top: 0;
    }
  }
  &.alert-dismissible {
    padding-right: 35px;
    .close {
      float: right;
      position: relative;
      top: -7px;
      right: -21px;
      border: 0;
      padding: 0;
      font-size: 21px;
      font-weight: 700;
      line-height: 1;
      background: none;
      opacity: 0.5;
      color: color-mix(in lch, currentColor, #000 30%);
      cursor: pointer;
      &:hover {
        text-decoration: none;
        opacity: 0.75;
      }
    }
  }
  a,
  .alert-link {
    font-weight: 700;
  }
}

.alert-error {
  background-color: var(--color-error-bg);
  border-color: var(--color-error-border);
  color: var(--color-error-fg);
  a,
  .alert-link {
    color: var(--color-error-link);
  }
}
.alert-info {
  background-color: var(--color-info-bg);
  border-color: var(--color-info-border);
  color: var(--color-info-fg);
  a,
  .alert-link {
    color: var(--color-info-link);
  }
}
.alert-success {
  background-color: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success-fg);
  a,
  .alert-link {
    color: var(--color-success-link);
  }
}
.alert-warn {
  background-color: var(--color-warn-bg);
  border-color: var(--color-warn-border);
  color: var(--color-warn-fg);
  a,
  .alert-link {
    color: var(--color-warn-link);
  }
}
