@import "settings.global";
@import "components.lists";
@import "components.cards";

@mixin menu {
  @include list--unstyled;
  @include card;
  display: block;
  width: $menu-width;
  margin: $menu-margin;
  background-color: $menu-background-color;
  border-radius: $menu-border-radius;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  max-height: $menu-max-height;
  z-index: $menu-z-index;
}

@mixin menu__item {
  @include card__item;
  cursor: pointer;
}

@mixin menu__item--divider {
  color: $menu-item-divider-color;
  font-weight: $menu-item-divider-font-weight;
}

@mixin menu__item--hover {
  @include card__item--hover;
  background-color: $menu-item-hover-background-color;
}

@mixin menu__item--active {
  background-color: $menu-item-active-background-color;
  font-weight: $menu-item-active-font-weight;
}

@mixin menu__item--disabled {
  color: $menu-item-disabled-color;
  cursor: not-allowed;
}

@mixin menu__item--borderless {
  @include card__item--borderless;
}

@mixin menu__group-divider {
  @include card__group-divider;
}

@mixin menu--high {
 @include card--high;
}

@mixin menu--higher {
  @include card--higher;
}

@mixin menu--highest {
  @include card--highest;
}