/*
 * USWDS site alert styles for templates/usgs/site_alert.html.
 *
 * These rules are a verbatim subset of static/css/main.css -- the compiled USWDS + WDFN
 * bundle that https://api.waterdata.usgs.gov/ also serves -- narrowed to the selectors the
 * site alert markup actually uses.
 *
 * Why the duplication: templates/openapi/swagger.html does not load main.css (dropping a
 * full USWDS bundle onto that page would restyle Swagger UI), and neither wdfnviz.css nor
 * swagger-ui.css defines any .usa-alert, .usa-site-alert, or .usa-link rules. Linking this
 * small file from usgs/head.html gets the alert styled identically on every HTML page.
 *
 * Declaration order is preserved from main.css and matters: the final
 * `.usa-site-alert .usa-alert .usa-alert__body` block is a WDFN customization that
 * intentionally overrides the USWDS defaults above it.
 *
 * Keep in sync with main.css when that bundle is re-vendored.
 */

.usa-link {
  color: #005ea2;
  text-decoration: underline;
}

.usa-link:visited {
  color: #54278f;
}

.usa-link:hover {
  color: #1a4480;
}

.usa-link:active {
  color: #162e51;
}

.usa-link:focus {
  outline: 0.25rem solid #2491ff;
  outline-offset: 0;
}

.usa-alert {
  background-color: #f0f0f0;
  border-left: 0.5rem solid #a9aeb1;
  color: #1b1b1b;
}

.usa-alert .usa-alert__body {
  font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
  font-size: 1.06rem;
  line-height: 1.5;
  padding-bottom: 1rem;
  padding-top: 1rem;
  position: relative;
}

.usa-alert .usa-alert__text {
  margin-bottom: 0;
  margin-top: 0;
}

.usa-alert .usa-alert__text:only-child {
  padding-bottom: 0;
  padding-top: 0;
}

.usa-alert .usa-alert__body > .usa-list,
.usa-alert > .usa-list {
  padding-left: 2ch;
}

.usa-alert .usa-alert__body > .usa-list:last-child,
.usa-alert > .usa-list:last-child {
  margin-bottom: 0;
}

.usa-alert .usa-alert__body {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.usa-alert .usa-alert__body::before,
.usa-site-alert .usa-alert .usa-alert__body::before {
  left: 1.0833333333rem;
}

.usa-alert--info .usa-alert__body .usa-link {
  color: #005ea2;
}

.usa-alert--info {
  background-color: #e7f6f8;
  border-left-color: #00bde3;
}

.usa-alert--info .usa-alert__body::before {
  background-image: url(./img/usa-icons/info.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 2rem 2rem;
  height: 2rem;
  width: 2rem;
}

@supports ((-webkit-mask: url()) or (mask: url())) {
  .usa-alert--info .usa-alert__body::before {
    background: 0 0;
    background-color: #1b1b1b;
    -webkit-mask-image: url(./img/usa-icons/info.svg), linear-gradient(transparent, transparent);
    mask-image: url(./img/usa-icons/info.svg), linear-gradient(transparent, transparent);
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 2rem 2rem;
    mask-size: 2rem 2rem;
  }
}

.usa-alert--info .usa-alert__body::before {
  content: '';
  display: block;
  position: absolute;
  top: 0.6666666667rem;
}

.usa-alert--info .usa-alert__body {
  color: #1b1b1b;
  background-color: #e7f6f8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 3.3333333333rem;
}

.usa-alert--info .usa-alert__body > * {
  margin-left: 2.5rem;
}

.usa-alert--info .usa-alert__body .usa-link:visited {
  color: #54278f;
}

.usa-alert--info .usa-alert__body .usa-link:active,
.usa-alert--info .usa-alert__body .usa-link:hover {
  color: #1a4480;
}

.usa-site-alert .usa-alert {
  background-color: #f0f0f0;
  border-left: 0.5rem solid #a9aeb1;
  color: #1b1b1b;
}

.usa-site-alert .usa-alert .usa-alert__body {
  font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
  font-size: 1.06rem;
  line-height: 1.5;
  padding-bottom: 1rem;
  padding-top: 1rem;
  position: relative;
}

.usa-site-alert .usa-alert .usa-alert__text {
  margin-bottom: 0;
  margin-top: 0;
}

.usa-site-alert .usa-alert .usa-alert__text:only-child {
  padding-bottom: 0;
  padding-top: 0;
}

.usa-site-alert .usa-alert .usa-alert__body > .usa-list,
.usa-site-alert .usa-alert > .usa-list {
  padding-left: 2ch;
}

.usa-site-alert .usa-alert .usa-alert__body > .usa-list:last-child,
.usa-site-alert .usa-alert > .usa-list:last-child {
  margin-bottom: 0;
}

.usa-site-alert .usa-alert .usa-alert__body {
  max-width: 64rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

@media all and (min-width: 64em) {
  .usa-site-alert .usa-alert .usa-alert__body {
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }

  .usa-site-alert .usa-alert .usa-alert__body::before {
    left: 1.5833333333rem;
  }
}

.usa-site-alert--info .usa-alert {
  background-color: #e7f6f8;
  border-left-color: #00bde3;
}

.usa-site-alert--info .usa-alert .usa-alert__body::before {
  background-image: url(./img/usa-icons/info.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 2rem 2rem;
  height: 2rem;
  width: 2rem;
}

@supports ((-webkit-mask: url()) or (mask: url())) {
  .usa-site-alert--info .usa-alert .usa-alert__body::before {
    background: 0 0;
    background-color: #1b1b1b;
    -webkit-mask-image: url(./img/usa-icons/info.svg), linear-gradient(transparent, transparent);
    mask-image: url(./img/usa-icons/info.svg), linear-gradient(transparent, transparent);
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 2rem 2rem;
    mask-size: 2rem 2rem;
  }
}

.usa-site-alert--info .usa-alert .usa-alert__body::before {
  content: '';
  display: block;
  position: absolute;
  top: 0.6666666667rem;
}

.usa-site-alert--info .usa-alert .usa-alert__body {
  color: #1b1b1b;
  background-color: #e7f6f8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 3.3333333333rem;
}

.usa-site-alert--info .usa-alert .usa-alert__body > * {
  margin-left: 2.5rem;
}

.usa-site-alert--info .usa-alert .usa-alert__body .usa-link {
  color: #005ea2;
}

.usa-site-alert--info .usa-alert .usa-alert__body .usa-link:visited {
  color: #54278f;
}

.usa-site-alert--info .usa-alert .usa-alert__body .usa-link:active,
.usa-site-alert--info .usa-alert .usa-alert__body .usa-link:hover {
  color: #1a4480;
}

/* WDFN customization -- must stay last so it wins over the USWDS defaults above. */
.usa-site-alert .usa-alert .usa-alert__body {
  max-width: none;
  margin-left: 2.5rem;
}