@use "sass:color";
@use "colors" as *;
@use "../colors" as *;
@use "sizes" as *;
@use "../sizes" as *;
@use "../menu/colors" as *;
@use "../button/sizes" as *;
@use "../common/mixins" as *;
@use "../../base/icon_fonts" as *;
@use "../../base/mixins" as *;
@use "../../base/menuBase";

// adduse

$material-menu-arrow-image-size: 7px;

.dx-menu-item {
  color: $menu-color;

  a {
    color: $menu-item-link-color;
  }

  &.dx-state-disabled {
    opacity: 0.5;
  }

  &.dx-state-hover {
    background-color: $menu-item-hover-bg;
  }

  &.dx-state-focused {
    background-color: $menu-item-hover-bg;
  }
}

.dx-menu-item-selected {
  background-color: $menu-item-selected-bg;
  color: $menu-item-selected-color;

  &.dx-state-focused {
    background-color: $menu-item-focused-selected-bg;
  }
}

.dx-menu-item-expanded,
.dx-menu-item-expanded.dx-state-hover,
.dx-menu-item-expanded.dx-state-focused {
  color: $menu-item-expanded-color;
  background-color: $menu-item-selected-bg;
}

.dx-menu-base {
  @include dx-base-typography();

  &.dx-state-focused {
    outline: none;
  }

  .dx-icon {
    @include dx-icon-sizing($material-button-icon-size);
  }

  .dx-menu-item {
    .dx-menu-item-content {
      line-height: $material-menu-item-line-height;

      .dx-menu-item-popout {
        min-width: $material-menu-arrow-image-size;
        min-height: $material-menu-arrow-image-size;
      }
    }
  }
}