@import "settings.colors";

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

.c-scroll-menu {
  @include c-scroll-menu-height(rem(44));
  // See: https://css-tricks.com/flexbox-truncated-text/
  min-width: 0;
}
.c-scroll-menu__inner {
  margin: 0 auto;
  overflow: hidden;
  display: flex;
}
.c-scroll-menu__arrow {
  border-left: 1px solid $color-grey-500;
  border-right: 1px solid $color-grey-500;
  align-items: center;
  display: none;
  .c-button {
    height: 100%;
  }
}
.c-scroll-menu__nav {
  overflow: hidden;
  position: relative;
  flex: 1;
}
.c-scroll-menu__list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  // Has to be "scroll" for momentum, not "auto"
  overflow-x: scroll;
  overflow-y: hidden;
  @include touch-scrollable;
  @include flex-display(flex, "");
}
.c-scroll-menu__item {
  width: auto;
  flex-shrink: 0;
  &:first-child {
    .c-scroll-menu__text,
    .c-scroll-menu__link {
      padding-left: rem(15);
    }
  }
  &:last-child {
    .c-scroll-menu__text,
    .c-scroll-menu__link {
      padding-right: rem(15);
    }
  }
}
.c-scroll-menu__text,
.c-scroll-menu__link {
  padding: 0 rem(10);
  color: $color-white;
  display: block;
  flex-direction: column;
  font-size: rem(12);
  justify-content: space-around;
  letter-spacing: rem(1);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}
.c-scroll-menu__text {
  @include font-gm-sans;
}
.c-scroll-menu__link {
  @include font-gm-sans-bold;
  &:hover,
  &:focus {
    text-decoration: underline;
  }
  &:active {
    color: $color-grey-300;
    text-decoration: underline;
  }
}

// Font options

.c-scroll-menu--lowercase {
  .c-scroll-menu__text,
  .c-scroll-menu__link {
    @include font-gm-sans;
    font-size: rem(14);
    letter-spacing: rem(0.5);
    text-transform: none;
  }
}

// Colour options

.c-scroll-menu--dark-primary {
  @include c-scroll-menu-color($color-grey-700);
}
.c-scroll-menu--dark-secondary {
  @include c-scroll-menu-color($color-grey-800);
}
.c-scroll-menu--light-primary {
  @include c-scroll-menu-color($color-white);
}
.c-scroll-menu--light-secondary {
  @include c-scroll-menu-color($color-stone-150);
  .c-scroll-menu__arrow {
    border-color: $color-stone-300;
  }
}
.c-scroll-menu--light-primary,
.c-scroll-menu--light-secondary {
  .c-scroll-menu__text,
  .c-scroll-menu__link {
    color: $color-grey-900;
  }
  .c-scroll-menu__link {
    &:hover,
    &:focus,
    &:active {
      color: $color-grey-600;
    }
  }
}
