@import "tools.functions";
@import "tools.mixins";
@import "base.controls";
@import "components.button";

// Utility mixins

@mixin c-scroll-menu-max-width($max-width) {
  .c-scroll-menu__inner {
    max-width: $max-width;
  }
}

// Height

@mixin c-scroll-menu-height($height) {
  .c-scroll-menu__inner {
    height: $height;
  }
  .c-scroll-menu__list {
    // Add space for browsers with horizontal scrollbars
    height: $height + rem(20);
  }
  .c-scroll-menu__link {
    line-height: $height;
  }
}

// Arrows

// Only show the arrows when they're needed
@mixin c-scroll-menu-show-arrows-when-required {
  .c-scroll-menu--overflowing {
    .c-scroll-menu__arrow {
      display: flex;
    }
  }
}

// Always show the arrows
@mixin c-scroll-menu-show-arrows {
  .c-scroll-menu__arrow {
    display: flex;
  }
}

@mixin c-scroll-menu-hide-arrows {
  .c-scroll-menu__arrow {
    display: none;
  }
}

// Colour

@mixin c-scroll-menu-color($color) {
  background-color: $color;
  .c-scroll-menu__nav {
    &::before {
      @include gradient-layer(left, $color, rem(20));
    }
    &::after {
      @include gradient-layer(right, $color, rem(20));
    }
  }
  @if $color == $color-white {
    .c-scroll-menu__arrow {
      border-color: $color-stone-150;
      .c-button {
        @include control-button--light-primary;
        // @include c-button-styles("white-primary");
      }
    }
  }
  @if $color == $color-grey-700 {
    .c-scroll-menu__arrow .c-button {
      @include control-button--dark-primary;
      // @include c-button-styles($color-grey-700);
    }
  }
  @if $color == $color-grey-800 {
    .c-scroll-menu__arrow .c-button {
      @include control-button--dark-secondary;
      // @include c-button-styles("grey-secondary");
    }
  }
  // TODO: Add the remaining button colours?
}
