/**
 * @file
 * Style rules for alert banners
 */

/* Default */
.localgov-alert-banner {
  background-color: var(--alert-banner-bg-color);
}

dialog.localgov-alert-banner {
  margin: auto;
}

dialog.localgov-alert-banner::backdrop {
  background-color: var(--dialog-backdrop-color);
}

.localgov-alert-banner,
.localgov-alert-banner a {
  color: var(--alert-banner-color);
}

.localgov-alert-banner__content a:hover,
.localgov-alert-banner__content a:focus {
  background-color: var(--color-accent);
  color: var(--color-white);
}

.localgov-alert-banner--major .localgov-alert-banner__content a:hover,
.localgov-alert-banner--major .localgov-alert-banner__content a:focus {
  background-color: var(--color-white);
  color: var(--color-accent);
}

.localgov-alert-banner__close {
  align-items: center;
  background-color: var(--color-white);
  border: none;
  border-radius: 0.5rem;
  color: var(--color-accent);
  display: flex;
  font-size: var(--font-size-small);
  gap: 2.25rem;
  line-height: 1.5rem;
  padding: var(--alert-banner-close-padding-vertical)
    var(--alert-banner-close-padding-horizontal);
}

.localgov-alert-banner__close::after {
  background-color: var(--color-accent);
  content: "";
  display: block;
  height: 1.875rem;
  mask-image: url("../../assets/images/site/icons/circled-arrow-white.png");
  -webkit-mask-image: url("../../assets/images/site/icons/circled-arrow-white.png");
  mask-position: center;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  transform: rotate(270deg);
  width: 1.875rem;
}

.localgov-alert-banner__close:focus,
.localgov-alert-banner__close:hover {
  background-color: var(--color-accent);
  color: var(--color-white);
  text-decoration: none;
}

.localgov-alert-banner__close:focus::after,
.localgov-alert-banner__close:hover::after {
  background-color: var(--color-white);
}

/* Minor */
.localgov-alert-banner--minor .localgov-alert-banner__close {
  background-color: var(--color-accent);
  color: var(--color-white);
}

.localgov-alert-banner--minor .localgov-alert-banner__close::after {
  background-color: var(--color-white);
}

.localgov-alert-banner--minor .localgov-alert-banner__close:hover,
.localgov-alert-banner--minor .localgov-alert-banner__close:focus {
  background-color: var(--color-accent-2);
  color: var(--color-white);
}

.localgov-alert-banner--minor .localgov-alert-banner__close:hover::after,
.localgov-alert-banner--minor .localgov-alert-banner__close:focus::after {
  background-color: var(--color-white);
}

/* Major */
.localgov-alert-banner--major .localgov-alert-banner__close {
  background-color: var(--color-accent-2);
  color: var(--color-white);
}

.localgov-alert-banner--major .localgov-alert-banner__close::after {
  background-color: var(--color-white);
}

.localgov-alert-banner--major .localgov-alert-banner__close:hover,
.localgov-alert-banner--major .localgov-alert-banner__close:focus {
  background-color: var(--color-white);
  color: var(--color-accent-2);
}

.localgov-alert-banner--major .localgov-alert-banner__close:hover::after,
.localgov-alert-banner--major .localgov-alert-banner__close:focus::after {
  background-color: var(--color-accent-2);
}

/* Minor */
.localgov-alert-banner--minor {
  background-color: var(--alert-banner-bg-color-minor);
  color: var(--alert-banner-color-minor);
}
.localgov-alert-banner--minor a {
  color: var(--alert-banner-color-minor);
}

/* Major */
.localgov-alert-banner--major {
  background-color: var(--alert-banner-bg-color-major);
}

/* Death of a notable person */
.localgov-alert-banner--notable-person {
  background-color: var(--alert-banner-bg-color-notable-person);
}

.localgov-alert-banner__inner {
  margin: var(--alert-banner-inner-margin-vertical)
    var(--alert-banner-inner-margin-horizontal);
  padding: var(--alert-banner-inner-padding-vertical)
    var(--alert-banner-inner-padding-horizontal);
  position: relative;
}

.localgov-alert-banner__title {
  align-items: center;
  display: flex;
  font-size: var(--font-size-medium);
  margin-bottom: 1.5625rem;
  min-height: 3.125rem;
  padding-inline-end: 10rem;
}

.localgov-alert-banner__body p {
  font-size: var(--font-size-small);
  margin: 0rem;
}

.localgov-alert-banner--content-link a {
  background-color: var(--color-accent);
  border-radius: 0.5rem;
  color: var(--color-white);
  display: inline-block;
  font-size: var(--font-size-small);
  font-weight: 700;
  line-height: 1.5rem;
  padding: 0.625rem 0.9375rem;
  text-decoration: none;
}

.localgov-alert-banner--content-link {
  margin-top: 1.5625rem;
}

.localgov-alert-banner--content-link a:focus,
.localgov-alert-banner--content-link a:hover {
  background-color: var(--color-white);
  color: var(--color-accent);
}

/* Minor */
.localgov-alert-banner--minor .localgov-alert-banner--content-link a {
  background-color: var(--color-accent-2);
}

.localgov-alert-banner--minor .localgov-alert-banner--content-link a:hover,
.localgov-alert-banner--minor .localgov-alert-banner--content-link a:focus {
  background-color: var(--color-accent);
  color: var(--color-white);
}

/* Major */
.localgov-alert-banner--major .localgov-alert-banner--content-link a {
  background-color: var(--color-white);
  color: var(--color-accent);
}

.localgov-alert-banner--major .localgov-alert-banner--content-link a:hover,
.localgov-alert-banner--major .localgov-alert-banner--content-link a:focus {
  background-color: var(--color-accent-2);
  color: var(--color-white);
}

.localgov-alert-banner__actions {
  inset-inline-end: 0rem;
  position: absolute;
}

@media screen and (min-width: 48rem) {
  .localgov-alert-banner__title {
    font-size: var(--font-size-large-1);
  }

  .localgov-alert-banner__body p {
    font-size: var(--font-size-medium);
  }
}