@use "uswds-core" as *;
@use "colors";
@use "text-theme";

/*
  Top navigation header

  header
    h1
      img
      a
    div
      search input
    nav
      about
      definitions
      data
      api
*/

header#analytics-header {
  align-items: center;
  border-bottom: units(1) solid colors.$palette-color-4;
  flex-direction: column;
  justify-content: center;

  @include at-media("desktop") {
    flex-direction: row;
  }

  @include at-media("widescreen") {
    justify-content: flex-start;
  }

  h1 {
    font-size: size("sans", "lg");
    order: 1;

    @include at-media("tablet") {
      flex: 4;
    }

    @include at-media("desktop") {
      flex: 5;
    }

    @include at-media("widescreen") {
      flex: 6;
    }

    @include at-media("tablet") {
      font-size: size("sans", "2xl");
      line-height: units(10);
    }

    strong {
      font-weight: font-weight(700);
    }

    img.analytics {
      // filter equivalent of "blue-50"
      filter: invert(39%) sepia(97%) saturate(458%) hue-rotate(167deg)
        brightness(88%) contrast(95%);
      height: units(4);
      margin-bottom: - units(0.5);

      @include at-media("tablet") {
        height: units(7);
        margin-bottom: - units(1);
      }
    }
  }

  a {
    color: colors.$white;
    font-weight: text-theme.$default-font-weight;
    text-decoration: none;

    &:hover {
      color: colors.$white;
      text-decoration: underline;
    }

    &:visited {
      color: colors.$white;
    }
  }

  #site-search-form {
    display: flex;
    flex: 2;
    flex-direction: column;
    justify-content: center;
    order: 4;
    padding-top: units(2);

    @include at-media("desktop") {
      flex: 3;
      order: 2;
      padding-top: 0;
    }

    button {
      width: auto;
    }
  }

  nav.links {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    list-style: none;
    order: 3;

    @include at-media("tablet") {
      flex: 5;
      justify-content: flex-end;
    }

    @include at-media("tablet-lg") {
      flex: 5;
    }

    span.link-bullet {
      font-size: 1.25rem;
      padding: 0 units(1);

      @include at-media("tablet") {
        font-size: units(3);
      }
    }

    a {
      font-size: 1.25rem;

      @include at-media("tablet") {
        font-size: units(3);
      }
    }
  }
}

.sm-hide {
  display: none;

  @include at-media("desktop-lg") {
    display: inline;
  }
}
