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

.container {
  display: flex;
  align-items: center;
  padding-top: int.$spacing-2;
  padding-right: int.$spacing-3;
  padding-bottom: 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-top: int.$spacing-4;
    padding-right: calc(int.$spacing-6 - 2px);
    padding-bottom: int.$spacing-4;
    padding-left: int.$spacing-6;
  }
}

.logo {
  flex-shrink: 0;
  width: 54px;

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

.scroll {
  flex: 1;
  display: flex;
  align-items: center;
  gap: int.$spacing-5;
  overflow-x: auto;
  overflow-y: hidden;
  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");
}

.link {
  cursor: pointer;

  @include int.election-text-link;
}

.drawer {
  position: relative;
  flex-shrink: 0;

  @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));
    }
  }
}

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