@import "settings.breakpoints";
@import "settings.colors";
@import "settings.vars";
@import "settings.z-index";

@import "mixins/components.scroll-menu";
@import "mixins/settings.fonts";
@import "mixins/tools.mixins";

.c-scroll-menu {
  @include c-scroll-menu-default;
}

.c-scroll-menu--white {
  @include c-scroll-menu-white;
}

.c-scroll-menu--grey-700 {
  @include c-scroll-menu-grey-700;
}

.c-scroll-menu--grey-800 {
  @include c-scroll-menu-grey-800;
}

.c-scroll-menu--grey-900 {
  @include c-scroll-menu-grey-900;
}

.c-scroll-menu--disabled {
  .c-scroll-menu__list {
    &::before {
      background: none;
    }
    &::after {
      background: none;
    }
  }

  &.c-scroll-menu--white {
    .c-scroll-menu__list {
      &::before {
        background: none;
      }
      &::after {
        background: none;
      }
    }
  }
}

.c-scroll-menu__nav {
  height: auto;
  overflow: hidden;
  position: relative;
  flex: 1;
}

.c-scroll-menu__list {
  display: flex;
  height: $c-control-button-size-outer + rem(20); // add room for browsers with horizontal scrollbar
  list-style-type: none;
  margin: 0;
  padding: 0;
  flex: 1;

  // has to be `scroll` for momentum, not `auto`
  overflow-x: scroll;
  overflow-y: none;
  @include touch-scrollable;
}

.c-scroll-menu__list--center {
  justify-content: center;
  @include mq($until: mobileWide) {
    justify-content: left;
  }
}

.c-scroll-menu__item {
  display: inline-block;
  width: auto;
  flex-shrink: 0;

  &:first-child {
    .c-scroll-menu__link {
      padding-left: rem(15);
    }
  }
  &:last-child {
    .c-scroll-menu__link {
      padding-right: rem(15);
    }
  }
}

.c-scroll-menu__link {
  @include font-gm-sans-bold;
  padding: 0 rem(10);
  color: $color-white;
  display: block;
  flex-direction: column;
  font-size: rem(14);
  justify-content: space-around;
  letter-spacing: rem(1);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
  line-height: $c-control-button-size-outer;
  user-select: none;

  &.c-scroll-menu__link--footer {
    font-size: rem(14);
  }

  @include mobile-only {
    font-size: rem(12);
  }

  &:hover,
  &:focus {
    text-decoration: underline;
  }

  &:active {
    color: $color-grey-300;
    text-decoration: underline;
  }

  .c-scroll-menu--white & {
    @include font-gm-sans;
    color: $color-grey-900;
    text-transform: none;
    text-decoration: underline;
    letter-spacing: rem(0.5);

    &:hover, &:focus {
      color: $color-grey-600;
      text-decoration: underline;
    }

    &:active {
      color: $color-grey-500;
      text-decoration: underline;
    }

    @include mobile-only {
      font-size: rem(14);
    }
  }
}

.c-scroll-menu__link.c-scroll-menu__link--disabled {
  color: $color-grey-300;
  pointer-events: none;
  user-select: none;
}

.c-scroll-menu__arrow--left {
  border-left: 1px solid $color-grey-500;
  border-right: 1px solid $color-grey-500;

  &.c-control--white {
    border-left: 1px solid $color-stone-150;
    border-right: 1px solid $color-stone-150;
  }
}

.c-scroll-menu__arrow--right {
  border-left: 1px solid $color-grey-500;
  border-right: 1px solid $color-grey-500;

  &.c-control--white {
    border-left: 1px solid $color-stone-150;
    border-right: 1px solid $color-stone-150;
  }
}

.c-scroll-menu__static-nav {
  width: 100%;
  background-color: $color-grey-900;
  height: rem(55);
  margin: rem(10) 0 0 0;
  overflow: hidden;

  @include tablet-down {
    .c-scroll-menu__list--center {
      justify-content: center;
    }
  }

  @include mobile-only {
    margin: rem(10) rem(-10) 0 rem(-10);
    width: 100vw;
  }
}
