/**
 * header alerts module css
 */

#header-alerts .header-alert {
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: grid;
  grid-template-areas: "title body";
  grid-template-columns: auto auto;
  background-color: #ffd000;
}

#header-alerts .header-alert .field-alert-header {
  grid-area: title;
  margin-bottom: 0;
  margin-left: 1rem;
  font-size: 1.1em;
  font-weight: 600;
  text-align: right;
}

#header-alerts .header-alert .field-alert-header::after {
  content: ":";
}

#header-alerts .header-alert .field-body {
  grid-area: body;
  padding-left: 2rem;
  margin-bottom: 0;
  margin-right: 1rem;
  font-size: 1rem;
  align-self: center;
  text-align: left;
}

@media (max-width: 991px){
  #header-alerts .header-alert .field-body {
    padding-right: 0;
    text-align: center;
  }
  #header-alerts .header-alert .field-alert-header {
    margin-bottom: 1em;
    font-size: 1rem;
    text-align: center;
  }
  #header-alerts .header-alert {
    display: block;
  }
}

/* in-page alert */
/* note: the Alert Item follow Alert - gray*/
.alerts.bg-yellow {
  border-left: 2px solid var(--border-sytem-focus, #ffd200);
  background-color: var(--background-accent-brand-gold, #fff9d5) !important;
  .alert-cta:focus,
  .alert-cta:hover {
    background-color: inherit;
    border-color: none;
    color: #9f001c;
  }
}

.alerts.bg-red {
  color: var(--content-system-primary, #000);
  border-left: 2px solid var(--border-sytem-sencondary, #e21833);
  background: var(--background-accent-brand-red, #fdd8dd) !important;
  .alert-cta {
    color: #c6152d;
  }

  .alert-cta:focus,
  .alert-cta:hover {
    background-color: inherit;
    border-color: none;
    color: #9f001c;
  }
}

.section-ut_alert,
.alerts.bg-light-gray {
  border-left: 2px solid var(--border-interactive-primary-default, #6d7078);
  background: var(--background-system-secondary, #f8f9fc) !important;
  .alert-cta:focus,
  .alert-cta:hover {
    background-color: inherit;
    border-color: none;
    color: #9f001c;
  }
}

.alerts,
.section-ut_alert .alert {
  padding: 16px 32px;
  .alert {
    margin-bottom: 0px;
  }

  .alert-heading {
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 27px; /* 150% */
    margin-bottom: 8px;
  }

  .alert-content {
    /* body-medium */
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */

    p {
      margin-bottom: 8px;
    }

    p:last-of-type {
      margin-bottom: 20px;
    }

    a {
      color: #c6152d;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;

      text-decoration: none;
    }
  }
}