/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
@import "../icons/variables";
@import "../inputs/variables";
@import "../style/baseline";
@import "../style/colors";
@import "../style/opacity";
@import "../style/themecolors";
@import "../style/typography";
@import "../z-index";

// cspell:ignore themecolors unbordered

$uicore-menu-padding: $uicore-bordered-padding;
$uicore-menu-top-bottom-padding: $uicore-menu-padding * 0.6667;

.core-context-menu-global {
  position: fixed;
  width: 0px;
  height: 0px;

  @include uicore-z-index(context-menu-z);
}

.core-context-menu {
  color: $buic-foreground-body;

  &:hover {
    color: $buic-foreground-activehover;
    cursor: auto;
  }

  width: 0px;
  height: 0px;
  position: relative;

  @include uicore-z-index(context-menu-z);

  .core-context-menu-container {
    position: absolute;
    border-radius: 3px;
    padding: 4px 0;
    box-shadow: 0px 3px 5px 0 rgba(0, 0, 0, 0.2);
    background-color: $buic-background-1;
    text-overflow: ellipsis;
    min-width: max-content;
    max-width: 350px;
    visibility: hidden;
    transform: scaleY(0);
    display: table;
    border: 1px solid $buic-background-divider;
    box-shadow: rgba($uicore-black, 0.25) 0px 1px 1px;

    &.core-context-menu-floating {
      position: fixed;
    }

    &.core-context-menu-opened {
      visibility: inherit;
      transform-origin: top;
      transform: scaleY(1);
    }

    &.core-context-menu-center {
      transform: translate(-50%, -50%);
    }

    &.core-context-menu-right {
      transform: translate(0%, -50%);
    }

    &.core-context-menu-left {
      transform: translate(-100%, -50%);
    }

    &.core-context-menu-top {
      transform: translate(-50%, -100%);

      &.core-context-menu-right {
        transform: translate(0%, -100%);
      }

      &.core-context-menu-left {
        transform: translate(-100%, -100%);
      }
    }

    &.core-context-menu-bottom {
      transform: translate(-50%, 0%);

      &.core-context-menu-right {
        transform: translate(0%, 0%);
      }

      &.core-context-menu-left {
        transform: translate(-100%, 0%);
      }
    }

    .core-context-menu-item {
      display: flex;
      cursor: default;
      padding: $uicore-menu-top-bottom-padding $uicore-menu-padding;
      width: calc(100% - 2 * #{$uicore-menu-padding});
      align-items: center;
      position: relative;
      box-sizing: content-box;

      &:hover {
        background-color: $buic-row-hover;
      }

      &.core-context-menu-is-selected {
        background-color: $buic-row-selection;
      }

      &.core-context-menu-disabled {
        color: $buic-foreground-disabled;
      }

      &.core-context-menu-hidden {
        display: none;
      }

      > .core-context-menu-icon {
        flex-shrink: 0;
        flex-grow: 0;
        width: $uicore-icons-small;
        height: $uicore-line-height;
        font-size: $uicore-icons-small;
        line-height: $uicore-line-height;
        text-align: center;
        margin-right: $uicore-unbordered-padding;
        opacity: $uicore-opacity-2;

        &.core-context-menu-icon-right {
          margin-left: $uicore-unbordered-padding;
          margin-right: 0;
        }
      }

      > .core-context-menu-content {
        flex-shrink: 0;
        flex-grow: 1;
        font-size: $uicore-font-size;
        text-align: left;
      }

      > .core-context-menu-badge {
        position: absolute;
        top: 0;
        left: 0;
      }

      &:focus {
        outline: none;
      }
    }

    &:focus {
      border: 1px solid $buic-background-divider;
      box-shadow: rgba($uicore-black, 0.25) 0px 1px 1px;
      outline: 0px;

      > .core-context-menu-item.is-selected,
      > .context-submenu > .core-context-menu-item.is-selected {
        // .is-selected being applied on hover, overriding with hover color
        background-color: $buic-row-hover;
      }
    }

    .core-context-submenu {
      display: flex;

      &.core-context-menu-top {
        flex-direction: column;
        align-items: center;
      }

      &.core-context-menu-left {
        flex-direction: row-reverse;
        align-items: center;
      }

      &.core-context-menu-right {
        flex-direction: row;
        align-items: center;
      }

      &.core-context-menu-center {
        flex-direction: column;
        align-items: center;
      }

      &.core-context-menu-top.core-context-menu-left {
        flex-direction: column;
        align-items: flex-start;
      }

      &.core-context-menu-top.core-context-menu-right {
        flex-direction: row;
        align-items: flex-end;
      }

      &.core-context-menu-bottom.core-context-menu-left {
        flex-direction: row-reverse;
        align-items: flex-start;
      }

      &.core-context-menu-bottom.core-context-menu-right {
        flex-direction: row;
        align-items: flex-start;
      }

      .core-context-submenu-container .core-context-submenu-arrow {
        flex-shrink: 0;
        flex-grow: 0;
        margin-left: $uicore-unbordered-padding;
        width: $uicore-icons-small;
        height: $uicore-line-height;
        font-size: $uicore-icons-small * 0.5;
        line-height: $uicore-line-height;
        text-align: center;
      }
    }
  }

  .core-context-menu-divider {
    border-bottom: 1px solid $buic-inputs-border;
    height: 0px;
  }

  .core-context-submenu-popup {
    transform: translateY(-5px); // Compensate for the vertical padding
  }
}