@use "sass:color";
@use "colors" as *;
@use "../colors" as *;
@use "sizes" as *;
@use "../sizes" as *;
@use "../../base/icons" as *;
@use "../menuBase/sizes" as *;
@use "../menu/colors" as *;
@use "../menu/sizes" as *;
@use "../../base/contextMenu";

// adduse
@use "../overlay";
@use "../menuBase" as *;


.dx-context-menu {
  .dx-menu-item {
    font-size: $material-context-menu-font-size;
    color: $base-text-color;

    .dx-menu-item-content {
      padding: $material-menu-vertical-padding $material-context-menu-horizontal-padding;

      .dx-menu-item-popout-container {
        right: $material-context-menu-horizontal-padding;
        width: $material-base-icon-size;

        .dx-menu-item-popout {
          color: $base-icon-color;

          @include dx-icon(spinright);
          @include dx-icon-font-centered-sizing($material-base-icon-size);
        }
      }
    }

    &.dx-menu-item-has-submenu > .dx-menu-item-content {
      padding-right: $material-menu-item-with-icon-horizontal-padding;
    }

    &.dx-menu-item-has-text {
      &.dx-menu-item-has-icon {
        .dx-icon {
          margin-right: $material-menu-horizontal-padding;
        }
      }
    }
  }

  .dx-menu-items-container {
    padding: $material-context-menu-container-vertical-padding 0;
  }

  &.dx-overlay-content.dx-state-focused {
    box-shadow: none;
  }

  .dx-submenu {
    background-color: $menu-popup-bg;
    border-radius: $base-border-radius;
    box-shadow: 0 2px 7px $menu-container-shadow-color;
  }

  .dx-menu-separator {
    background-color: $menu-separator-bg;
  }

  &.dx-rtl {
    .dx-menu-item {
      .dx-menu-item-popout-container {
        left: $material-context-menu-horizontal-padding;
      }

      &.dx-menu-item-has-text {
        &.dx-menu-item-has-icon {
          .dx-icon {
            margin-left: $material-menu-item-with-icon-horizontal-padding - $material-context-menu-horizontal-padding - $material-base-icon-size;
            margin-right: 0;
          }
        }
      }

      &.dx-menu-item-has-submenu > .dx-menu-item-content {
        padding-left: $material-menu-item-with-icon-horizontal-padding;
        padding-right: $material-context-menu-horizontal-padding;
      }
    }
  }
}