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

// adduse

$generic-menu-item-padding-increased: $generic-menu-item-padding-base + 2px;
$generic-menu-item-padding-reduced: $generic-menu-item-padding-base - 2px;
$generic-menu-arrow-image-size: 7px;

$generic-menu-popup-border: 1px solid $menu-popup-border-color;


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

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

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

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

  &.dx-state-focused {
    a {
      color: $base-inverted-text-color;
    }

    background-color: $menu-item-focused-bg;
    color: $base-inverted-text-color;
  }

  &.dx-menu-item-has-text {
    .dx-icon {
      margin-inline-end: -$generic-base-icon-size;
    }
  }
}

.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;
    color: $base-inverted-text-color;
  }
}

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

.dx-menu-item.dx-state-focused,
.dx-menu-item.dx-state-active,
.dx-menu-item-expanded {
  outline: none;
}

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

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

  .dx-icon {
    @include dx-icon-sizing($generic-base-icon-size);
  }

  .dx-menu-item-content {
    padding: $generic-menu-item-padding-reduced $generic-menu-item-padding-base $generic-menu-item-padding-increased;

    .dx-menu-item-text {
      padding-top: $generic-menu-item-padding-top-base;
      padding-inline-end: $generic-menu-padding-big;
      padding-bottom: $generic-menu-item-padding-base;
      padding-inline-start: $generic-menu-item-padding-base + $generic-base-icon-size;
    }

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