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

$fade-width: 24px;

.title {
  scroll-snap-align: center;

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

  a {
    @include int.election-text-link;
  }
}

.container {
  position: relative;
  isolation: isolate;

  @include int.breakpoint-at-most("xs") {
    &::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: $fade-width;
      background: linear-gradient(90deg, transparent, var(--nav-color));
    }
  }
}

.scrollContainer {
  overscroll-behavior-x: contain;
}

.links {
  display: flex;
  align-items: baseline;
  gap: int.$spacing-4;
  padding: 0 calc(#{int.$spacing-3} + #{$fade-width}) int.$spacing-2 int.$spacing-3;

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

.link {
  cursor: pointer;
  border-bottom: 1px solid transparent;
  scroll-snap-align: center;
  white-space: nowrap;

  @include int.sans($size: "200", $role: "component");

  @include int.breakpoint-at-least("sm") {
    @include int.overline($size: "100") {
      font-weight: normal;
    }
  }

  &.active {
    cursor: default;
    border-color: currentColor;

    &:hover {
      color: inherit;
    }
  }

  &:hover {
    color: int.$red-80;
    border-color: currentColor;
  }
}