// stylelint-disable declaration-no-important, property-no-vendor-prefix
@use '../settings/variables' as v;
@use '../settings/mixins' as m;
@use '../settings/functions' as f;

$-gov-banner-gray: #f0f0f0;
$-gov-banner-button-text-color: #005ea2;
$-gov-banner-button-text-hover-color: #1a4480;

.qpp-c-gov-banner {
  @include m.p2;
  box-sizing: border-box;
  background-color: $-gov-banner-gray;

  @include m.at-media(xs) {
    font-size: v.$font-size-14;
    padding-bottom: 0;
  }

  span,
  button,
  p,
  title,
  desc {
    font-family: v.$font-public-sans !important;
  }

  strong {
    font-weight: 700;
  }
}

.qpp-c-gov-banner__header,
.qpp-c-gov-banner__content {
  background-color: $-gov-banner-gray;
}

.qpp-c-gov-banner__content {
  background-color: transparent;
  font-size: v.$font-size-16;
  overflow: hidden;
  padding-bottom: v.$spacing-16;
  padding-left: v.$spacing-16;
  padding-right: v.$spacing-16;
  padding-top: v.$spacing-4;
  max-width: 64rem;
  width: 100%;
  margin-left: 1rem;

  @include m.at-media(xs) {
    padding-top: v.$spacing-24;
    padding-bottom: v.$spacing-24;
  }

  p {
    &:first-child {
      margin: 0;
    }
  }

  > div {
    margin-top: 0 !important;
  }
}

.qpp-c-gov-banner__guidance {
  display: flex;
  align-items: flex-start;
  padding-top: v.$spacing-16;
  max-width: 64ex;

  p {
    font-size: v.$font-size-16 !important;
  }

  @include m.at-media(xs) {
    padding-top: 0;
  }
}

.qpp-c-gov-banner__lock-image {
  $-lock-h: 64; // unitless height of svg
  $-lock-w: 52; // unitless width of svg
  $-lock-aspect: $-lock-w / $-lock-h;
  $-icon-height: 1.5ex; // height of the lock icon; use ex for resilience

  height: $-icon-height;
  width: $-icon-height * $-lock-aspect;
  path {
    fill: currentColor;
  }
}

.qpp-c-gov-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding-left: v.$spacing-16;
  padding-right: 0;
  max-width: 64rem;

  @include m.at-media(xs) {
    align-items: center;
  }

  @include m.at-media(md) {
    padding-left: v.$spacing-32;
    padding-right: v.$spacing-32;
  }

  .qpp-c-gov-banner__header-col1 {
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
    position: relative;
    box-sizing: border-box;
  }

  .qpp-c-gov-banner__header-col2 {
    flex: 1 1 0%;
    min-width: 1px;
    position: relative;
    box-sizing: border-box;

    @media (min-width: v.$width-xs) {
      flex: 0 1 auto;
      width: auto;
      max-width: 100%;
    }
  }
}

.qpp-c-gov-banner__header {
  padding-top: v.$spacing-8;
  padding-bottom: v.$spacing-8;
  font-size: v.$font-size-14;
  font-weight: normal;
  min-height: 3rem;
  position: relative;
  box-shadow: none;
  height: auto;
  display: block;

  @include m.at-media(xs) {
    padding-top: v.$spacing-4;
    padding-bottom: v.$spacing-4;
    min-height: 0;
  }
}

.qpp-c-gov-banner__header-text {
  margin-top: 0;
  margin-bottom: 0;
  font-size: v.$font-size-12 !important;
  line-height: v.$line-height-sm !important;
}

.qpp-c-gov-banner__header-flag {
  float: left;
  margin-right: v.$spacing-8;
  width: v.$spacing-16;
}

.qpp-c-gov-banner__icon {
  width: v.$spacing-40;
  margin-right: v.$spacing-8;
}

.qpp-c-gov-banner__header-action {
  line-height: v.$line-height-sm !important;
  margin-bottom: 0;
  margin-top: f.rem(2px);

  span {
    font-weight: v.$font-regular !important;
    text-decoration: underline !important;
  }

  .qpp-c-gov__header--expanded & {
    display: none;
  }

  @include m.at-media(xs) {
    display: none;
  }

  .qpp-c-gov-banner__header-action-text {
    text-decoration: underline;
    font-size: v.$font-size-12;
    color: $-gov-banner-button-text-color !important;
  }

  .qpp-c-gov-banner__header-action-icon {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;

    &::after {
      content: '';
      vertical-align: middle;
      display: inline-block;
      width: 1rem;
      height: 1rem;
      margin-top: f.rem(-2px);
      background-color: currentColor;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")
        no-repeat center/contain;
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")
        no-repeat center/contain;

      @include m.at-media(xs) {
        display: none;
      }
    }

    &[aria-expanded='true']::after {
      transform: rotate(180deg);
    }
  }
}

.qpp-c-gov-banner__header--expanded {
  @include m.at-media(xs) {
    background-color: transparent;
    display: block;
    min-height: 0;
    padding-right: 0;
  }

  .qpp-c-gov-banner__inner {
    margin-left: 0;
  }

  .qpp-c-gov-banner__header-action {
    display: none;
  }

  @include m.at-media-max(xs) {
    .qpp-c-gov-banner__header-text {
      margin-right: 3rem;
    }
  }
}

.qpp-c-gov-banner__button {
  font-weight: v.$font-regular !important;
  color: $-gov-banner-button-text-color !important;

  &::after {
    content: '';
    vertical-align: middle;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-top: f.rem(-2px);
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")
      no-repeat center/contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")
      no-repeat center/contain;
  }
  &:hover {
    color: $-gov-banner-button-text-hover-color !important;
  }

  @include m.at-media-max(xs) {
    &[aria-expanded='true']::after {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      height: 1.5rem;
      width: 1.5rem;
      margin: 0.75rem;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' focusable='false'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M0.292893219,0.292893219 C0.683417511,-0.0976310729 1.31658249,-0.0976310729 1.70710678,0.292893219 L1.70710678,0.292893219 L8,6.585 L14.2928932,0.292893219 C14.6834175,-0.0976310729 15.3165825,-0.0976310729 15.7071068,0.292893219 C16.0675907,0.65337718 16.0953203,1.22060824 15.7902954,1.61289944 L15.7071068,1.70710678 L9.415,8 L15.7071068,14.2928932 L15.7902954,14.3871006 C16.0953203,14.7793918 16.0675907,15.3466228 15.7071068,15.7071068 C15.3165825,16.0976311 14.6834175,16.0976311 14.2928932,15.7071068 L14.2928932,15.7071068 L8,9.415 L1.70710678,15.7071068 C1.31658249,16.0976311 0.683417511,16.0976311 0.292893219,15.7071068 C-0.0675907428,15.3466228 -0.0953202783,14.7793918 0.209704612,14.3871006 L0.292893219,14.2928932 L6.585,8 L0.292893219,1.70710678 L0.209704612,1.61289944 C-0.0953202783,1.22060824 -0.0675907428,0.65337718 0.292893219,0.292893219 Z' fill='%23242424' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' focusable='false'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M0.292893219,0.292893219 C0.683417511,-0.0976310729 1.31658249,-0.0976310729 1.70710678,0.292893219 L1.70710678,0.292893219 L8,6.585 L14.2928932,0.292893219 C14.6834175,-0.0976310729 15.3165825,-0.0976310729 15.7071068,0.292893219 C16.0675907,0.65337718 16.0953203,1.22060824 15.7902954,1.61289944 L15.7071068,1.70710678 L9.415,8 L15.7071068,14.2928932 L15.7902954,14.3871006 C16.0953203,14.7793918 16.0675907,15.3466228 15.7071068,15.7071068 C15.3165825,16.0976311 14.6834175,16.0976311 14.2928932,15.7071068 L14.2928932,15.7071068 L8,9.415 L1.70710678,15.7071068 C1.31658249,16.0976311 0.683417511,16.0976311 0.292893219,15.7071068 C-0.0675907428,15.3466228 -0.0953202783,14.7793918 0.209704612,14.3871006 L0.292893219,14.2928932 L6.585,8 L0.292893219,1.70710678 L0.209704612,1.61289944 C-0.0953202783,1.22060824 -0.0675907428,0.65337718 0.292893219,0.292893219 Z' fill='%23242424' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    }

    &[aria-expanded='false']::after {
      display: none;
    }

    &[aria-expanded='true']::before {
      bottom: 0;
      top: 0;
      position: absolute;
      right: 0;
      background-color: #e6e6e6;
      content: '';
      display: block;
      height: 3rem;
      width: 3rem;
      z-index: -1;
    }
  }

  @include m.at-media(xs) {
    &[aria-expanded='true']::after {
      transform: rotate(180deg);
    }
  }

  @include m.at-media(xs) {
    margin-left: v.$spacing-8;
    position: relative;
    display: inline;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;

    &:focus,
    &:visited {
      margin-left: v.$spacing-8 !important;
    }
  }

  @include m.at-media-max(xs) {
    position: absolute;
    height: auto;
    width: 100%;
    margin-left: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
}

.qpp-c-gov-banner__button-text {
  text-decoration: underline;
  font-size: v.$font-size-12;
  color: inherit;

  @include m.at-media-max(xs) {
    @include m.visually-hidden;
  }

  @include m.at-media(xs) {
    display: inline;
  }
}