// Import USWDS core settings and COB tokens
@use "uswds-core" as *;

// Variables
$banner-icon-size: 8rem !default; // A bit smaller
$banner-icon-size-mobile: 4rem !default; // A bit smaller
$banner-chevron-size: 0.75rem !default; // Smaller arrow icon
$banner-background-color: color("cob-charles-blue") !default; // COB Charles Blue
$banner-text-color: color("white") !default; // White
$banner-link-color: color("white") !default; // White
$banner-details-background-color: color("gray-4") !default; // Equivalent to gray-4
$banner-details-heading-color: color("cob-optimistic-blue") !default; // COB Optimistic Blue
$banner-details-text-color: color("ink") !default; // Equivalent to ink

// Component styles
.cob-site-banner {
  background-color: $banner-background-color;
  color: $banner-text-color;
  font-family: family("sans");
  font-size: size("body", "3xs");
  width: 100%;

  &--sticky {
    position: sticky;
    top: 0;
    z-index: z-index("top");
  }

  &__header {
    background-color: $banner-background-color;
    color: $banner-text-color;
    position: relative;
    width: 100%;
    cursor: pointer;

    &--expanded {
      .cob-site-banner__toggle-icon-img {
        transform: rotate(180deg);
      }
    }
  }

  &__inner {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    padding: units('05') 0;
    
    @include at-media("desktop") {
      height: units(3);
      padding: units('05') 0;
    }
  }
  
  &__content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: units("desktop");
    width: 100%;
    margin: 0 auto;
    padding: 0;
    gap: 0;

    @include at-media("mobile-lg") {
      flex-direction: row;
      gap: 0;
      padding: 0 units(2);
    }
  }

  &__left {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 0;
    width: 100%;
    justify-content: center;

    @include at-media("mobile-lg") {
      width: auto;
      justify-content: flex-start;
    }

    span {
      color: $banner-text-color;
    }
  }

  &__icon {
    display: block;
    margin-right: units(1);
    height: units(4);
    width: units(8);
    object-fit: contain;

    @include at-media("mobile-lg") {
      height: $banner-icon-size;
      width: $banner-icon-size;
      margin-right: units(2);
    }
  }

  &__right {
    display: flex;
    align-items: center;
    margin-left: 0;
    width: 100%;
    justify-content: center;

    @include at-media("mobile-lg") {
      width: auto;
      justify-content: flex-start;
      margin-left: units(1);
    }
  }

  &__button {
    @include button-unstyled;
    display: flex;
    align-items: center;
    color: $banner-text-color;
    font-weight: font-weight("normal");
    text-decoration: underline;
    cursor: pointer;
    background-color: transparent;
    pointer-events: none; // Make the button non-interactive so clicks pass through to the banner
    
    &:focus {
      @include focus-outline;
    }
  }

  &__button-text {
    margin-right: units(1);
  }

  &__toggle-icon-img {
    height: $banner-chevron-size;
    width: $banner-chevron-size;
    object-fit: contain;
    transition: transform 0.3s ease;
  }

  &__content {
    background-color: $banner-details-background-color;
    border-top: 1px solid #dfe1e2;
    overflow: hidden;
    width: 100%;
    cursor: default; // Override the pointer cursor when over the content

    &[hidden] {
      display: none !important;
    }

    &:not([hidden]) {
      display: block !important;
    }
  }

  &__content-inner {
    display: flex;
    flex-direction: column;
    max-width: units("desktop");
    margin: 0 auto;
    padding: units(2);

    @include at-media("tablet") {
      flex-direction: row;
      padding: units(2) 10%;
    }
  }

  &__info {
    display: flex;
    align-items: flex-start;
    margin-bottom: units(2);
    color: $banner-details-text-color;
    position: relative;

    @include at-media("tablet") {
      flex: 1;
      margin-right: units(2);
      margin-bottom: 0;

      &:last-child {
        margin-right: 0;
      }
    }

    strong {
      display: block;
      margin-bottom: units(0.5);
      color: $banner-details-heading-color;
    }

    p {
      margin: 0;
      line-height: line-height("body", 4);
      font-family: family("serif");
    }
  }

  &__info-icon {
    display: block;
    flex-shrink: 0;
    margin-right: units(2);
    margin-top: units(0.5);
    height: units(8);
    width: units(8);
    object-fit: contain;
  }
}