@use "../../../../styles/int.scss";

.container {
  display: grid;
  grid-template-columns: 1fr min-content max-content;
  align-items: center;
  padding-right: int.$spacing-3;
  padding-left: int.$spacing-3;

  @include int.breakpoint-at-least("md") {
    gap: int.$spacing-6;
  }

  @include int.breakpoint-at-least("sm") {
    padding-right: calc(int.$spacing-6 - 2px);
    padding-left: int.$spacing-6;
  }
}

.logo {
  width: 54px;

  @include int.breakpoint-at-least("sm") {
    width: 96px;
  }
}

.scrollContainer {
  width: 0;
  min-width: 100%;
  padding-top: int.$spacing-4;
  padding-bottom: int.$spacing-5;
  overscroll-behavior: contain;

  @include int.breakpoint-at-least("sm") {
    padding-top: int.$spacing-4;
    padding-bottom: int.$spacing-4;
  }

  &.showStateNav {
    padding-top: int.$spacing-2;

    @include int.breakpoint-at-least("sm") {
      padding-top: int.$spacing-4;
    }
  }
}

.scroll {
  display: flex;
  align-items: center;
  gap: int.$spacing-5;
  padding-right: int.$spacing-5;

  @include int.breakpoint-at-least("md") {
    padding-right: int.$spacing-6;
  }

  @include int.breakpoint-at-least("sm") {
    gap: int.$spacing-6;
  }
}

.links {
  display: flex;
  flex-grow: 1;
  gap: int.$spacing-4;

  @include int.breakpoint-at-least("sm") {
    gap: int.$spacing-8;
  }
}

.linkText {
  white-space: nowrap;
  color: int.$warmgray-100;

  @include int.overline($size: "100");

  &:has(.link:focus-visible) {
    color: int.$red-80;

    @include int.universal-focus;
  }
}

.link {
  cursor: pointer;

  @include int.election-text-link;
}

.drawer {
  position: relative;

  @include int.breakpoint-at-most("md") {
    &::before {
      content: "";
      position: absolute;
      top: 0;
      right: 100%;
      bottom: 0;
      width: int.$spacing-5;
      background: linear-gradient(90deg, var(--nav-color-transparent), var(--nav-color));
    }
  }

  &.showStateNav {
    @include int.breakpoint-at-most("xs") {
      padding-bottom: int.$spacing-3;
    }
  }
}

.toggle {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  color: int.$warmgray-80;

  @include int.election-text-link;
}

.bopContainer{
  display: grid;
  align-items: center;
  grid-template-columns: auto 74px;
  gap: int.$spacing-2;
}