/*
 * Copyright (c) 2010, 2025 BSI Business Systems Integration AG
 *
 * This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License 2.0
 * which is available at https://www.eclipse.org/legal/epl-2.0/
 *
 * SPDX-License-Identifier: EPL-2.0
 */

.context-menu-popup {
  #scout.popup-2();
  overflow: hidden;

  &.animate-open {
    .popup-animate-open();
  }

  &.animate-remove {
    .popup-animate-remove();
  }
}

.context-menu {
  position: absolute;
  margin: @context-menu-margin-y 0;
  background-color: @popup-2-background-color;

  & > .menu-item {
    display: flex;
    justify-content: start;
    padding: @context-menu-item-padding-y @context-menu-item-padding-right @context-menu-item-padding-y @context-menu-item-padding-left;
    color: @context-menu-item-color;
    border-radius: 0;

    & > .font-icon {
      color: @context-menu-item-icon-color;
      min-width: 16px;
      text-align: center;
    }

    & > .text {
      #scout.overflow-ellipsis();
      /* default is inline, inline-block is necessary so that max-width set by JS is respected */
      display: inline-block;
    }

    &.menu-textandicon > .icon {
      margin-right: @context-menu-item-icon-margin-right;
    }

    &.selected {
      color: @selected-color;

      & > .font-icon {
        color: @selected-color;
      }

      &.has-popup {
        color: @context-menu-item-color;

        & > .font-icon {
          color: @context-menu-item-icon-color;
        }
      }

      &.disabled {
        color: @selected-color;

        & > .font-icon {
          color: @selected-color;
        }
      }
    }

    &.focused {
      background-color: @context-menu-item-focused-background-color;

      &.selected {
        background-color: @selected-hover-background-color;
      }
    }

    &.expanded {
      & > .submenu-icon {
        #scout.submenu-icon-open();
      }
    }

    &.disabled {
      color: @menu-item-disabled-color;

      & > .font-icon {
        color: @menu-item-disabled-color;
      }
    }

    & > .key-box {
      bottom: auto;
      top: 5px;
    }
  }
}