@menu-class: ~'@{icecream-prefix}-menu';
@menu-list-class: ~'@{icecream-prefix}-menu-list';
@menu-item-group-class: ~'@{icecream-prefix}-menu-item-group';
@menu-item-class: ~'@{icecream-prefix}-menu-item';

@menu-padding-x: 20px;

.@{menu-class} {
  .extendBase();
  padding: 4px 0;
  max-height: 240px;
  overflow-y: auto;
}

.@{menu-list-class} {
  .extendBase();
  list-style: none;
  padding: 0;
  margin: 0;
}

.@{menu-item-group-class} {
  .extendBase();
  
  &-title {
    .extendBase();
    margin: 0;
    padding: 9px @menu-padding-x;
    .setFontSize(@icecream-font-size-1);
    color: @icecream-color-grey-8;
    font-weight: initial;
  }

  .@{menu-class}-size-small &-title {
    padding: 7px @menu-padding-x;
  }

  &:not(:last-child)::after {
    content: "";
    display: block;
    height: 1px;
    margin: 0 @menu-padding-x;
    background-color: @icecream-color-grey-5;
  }
}

.@{menu-item-class} {
  .extendBase();

  display: flex;
  align-items: center;
  padding: 7px @menu-padding-x;
  .setFontSize(@icecream-font-size-main);
  color: @icecream-color-grey-9;
  cursor: pointer;

  .@{menu-class}-size-small & {
    .setFontSize(@icecream-font-size-sm);
  }

  &-active, &:hover {
    color: @icecream-primary-color;
  }

  &:hover {
    background-color: fadeout(@icecream-primary-color, 95);
  }

  &-active, &-active:hover {
    background-color: fadeout(@icecream-primary-color, 90);
  }

  &-disabled, &-disabled:hover {
    cursor: not-allowed;
    color: @icecream-color-grey-7;
    background-color: transparent;
  }
}