@import "../settings.colors";
@import "../settings.vars";

@import "tools.mixins";

@mixin c-scroll-menu-default {
  flex: 1;
  display: flex;
  overflow: hidden;
  z-index: $z-index-menu-scroll;
  margin: 0 auto;
  width: auto;
  height: $c-header-height;
}

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

@mixin c-scroll-menu-tablet-landscape {
  .c-scroll-menu {
    width: rem(960);
    margin: 0 auto;
  }
}

@mixin c-scroll-menu-tablet-portrait {
  .c-scroll-menu {
    width: rem(730);
    margin: 0 auto;
  }
}

@mixin c-scroll-full-width {
  .c-scroll-menu {
    width: 100%;
    left: inherit;
    right: inherit;
  }
}

@mixin c-scroll-menu-short {
  .c-scroll-menu__nav,
  .c-scroll-menu__list {
    height: rem(44);
  }

  .c-scroll-menu__link {
    line-height: rem(44);
  }
}

@mixin c-scroll-menu-no-arrows {
  .c-scroll-menu {
    position: relative;
    margin-left: 0;
    width: 100%;

    .c-control--arrow {
      display: none;
    }
  }

}

@mixin c-scroll-menu-white {
  background-color: $color-white;

  .c-scroll-menu {
    background-color: $color-white;
  }

  .c-scroll-menu__nav {
    &::before {
      @include gradient-layer(left, $color-white, rem(20));
    }
    &::after {
      @include gradient-layer(right, $color-white, rem(20));
    }
  }
}

@mixin c-scroll-menu-grey-700 {
  background-color: $color-grey-700;

  .c-scroll-menu {
    background-color: $color-grey-700;
  }

  .c-scroll-menu__nav {
    &::before {
      @include gradient-layer(left, $color-grey-700, rem(20));
    }
    &::after {
      @include gradient-layer(right, $color-grey-700, rem(20));
    }
  }
}

@mixin c-scroll-menu-grey-800 {
  background-color: $color-grey-800;

  .c-scroll-menu {
    background-color: $color-grey-800;
  }

  .c-scroll-menu__nav {
    &::before {
      @include gradient-layer(left, $color-grey-800, rem(20));
    }
    &::after {
      @include gradient-layer(right, $color-grey-800, rem(20));
    }
  }
}

@mixin c-scroll-menu-grey-900 {
  background-color: $color-grey-900;

  .c-scroll-menu {
    background-color: $color-grey-900;
  }

  .c-scroll-menu__nav {
    &::before {
      @include gradient-layer(left, $color-grey-900, rem(20));
    }
    &::after {
      @include gradient-layer(right, $color-grey-900, rem(20));
    }
  }
}

// mixin is used when the header is pinned
@mixin c-scroll-menu-pinned {
  position: fixed;
  top: 0;
  z-index: $z-index-header-fixed;
  overflow: visible;

  .c-header-nav__container {
    overflow: visible;
  }
}
