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

// adduse
@use "../menuBase" as *;
@use "../../base/menu";


.dx-context-menu-container-border {
  background-color: transparent;
  border: $generic-menu-popup-border;
  box-shadow: 0 1px 1px $menu-container-shadow-color;
}

.dx-context-menu-content-delimiter {
  border-style: solid;
  border-color: transparent;
  border-width: 1px;

  &::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: $menu-popup-bg;
  }
}

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

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

  .dx-menu-item-has-icon.dx-menu-item-has-submenu {
    .dx-icon {
      margin-inline-end: $generic-menu-padding-small;
      margin-inline-start: $generic-menu-item-padding-reduced;
    }
  }

  .dx-menu-item-has-text {
    .dx-menu-item-text {
      padding: $generic-menu-item-padding-base;
      padding-top: $generic-menu-item-padding-top-base;
    }

    &.dx-menu-item-has-icon {
      .dx-icon {
        margin: 0 $generic-menu-item-padding-reduced;
      }
    }

    &.dx-menu-item-has-submenu {
      .dx-menu-item-text {
        padding-inline-end: $generic-menu-padding-small;
        padding-inline-start: $generic-menu-item-padding-base;
      }
    }
  }

  .dx-menu-horizontal {
    .dx-menu-item-popout {
      @include dx-icon(spindown);
      @include dx-icon-font-centered-sizing($generic-base-icon-size);
    }
  }

  .dx-menu-vertical {
    .dx-menu-item-popout {
      @include dx-icon(spinright);
      @include dx-icon-font-centered-sizing($generic-base-icon-size);
    }
  }
}

.dx-menu-adaptive-mode {
  background-color: $menu-popup-bg;

  .dx-treeview {
    border: 1px solid $menu-popup-border-color;
    border-radius: $base-border-radius;

    &,
    &.dx-state-focused {
      box-shadow: 0 3px 10px color.change($base-shadow-color, $alpha: 0.1);
    }
  }

  .dx-treeview-toggle-item-visibility {
    font-size: 18px;
  }

  .dx-treeview-node {
    &.dx-state-focused {
      .dx-treeview-node .dx-treeview-toggle-item-visibility {
        color: inherit;
      }

      .dx-treeview-toggle-item-visibility {
        color: $menu-popup-bg;
      }
    }
  }

  .dx-treeview-node-container:first-child > .dx-treeview-node {
    border-bottom: 1px solid $menu-popup-border-color;
  }
}