@use "../../../ui/styles/_variables" as *;
@use "uswds-core" as *;

.runQueryBtn {
  max-width: 16rem;
}

.menuButton {
  cursor: pointer;
  background: none !important;
  border: none !important;
  color: white !important;
  padding: 0px !important;
  font: inherit !important;
  margin: 0 !important;
  height: 1.5rem !important;
  width: 1.5rem !important;
}

.menuDropdownContainer {
  position: relative;
  z-index: 400;
  height: 0;
}

.menuDropdown {
  border-radius: 4px !important;
  padding: 0.5rem !important;
  background: $brand-darkest !important;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.16);
  position: absolute;
  right: 0px;
  top: 5px;
  width: 12rem;

  .menuItem {
    display: flex;

    &__button {
      color: $brand-lightest !important;
      text-decoration: none !important;
      padding: 0.5rem 1rem !important;
      cursor: pointer;
      border: none;
      background-color: transparent;

      &:hover {
        text-decoration: none !important;
      }
    }
  }
}

.headerContainer {
  display: flex;
  align-items: center !important;
  padding: 0 !important;
  height: $header-content-height;

  .headerRow {
    width: 100%;
  }
}

.siteLogoImage {
  background-image: url("../../styles/assets/logo.svg");
  height: 2.5rem;
  width: 2.5rem;
  margin-right: 0.75rem;
}

.siteLogoText {
  font-size: 1.5rem;
  @include u-font-family("serif");
  line-height: 1.125;
  white-space: nowrap;
}

@media screen and (max-width: $header-stacked-breakpoint) {
  .headerRow div:last-of-type {
    margin-top: 0.25rem;
  }

  .headerContainer {
    height: fit-content !important;
  }

  .buttonContainer {
    justify-content: space-between;
    button.menuButton,
    svg {
      height: 2rem !important;
      width: 2rem !important;
    }
  }
}

@media screen and (min-width: $header-small-text-min-breakpoint) and (max-width: $header-small-text-max-breakpoint) {
  .siteLogoText {
    font-size: 1.25rem !important;
  }
}
