src/components/ContextMenuPopup/ContextMenuPopup.scss
@import '../../constants/popup';

.ContextMenuPopup {
  @extend %popup;
  box-shadow: 0 0 3px 0 var(--document-box-shadow);
  background: var(--component-background);
  border-radius: 4px;

  &.is-horizontal {
    .container {
      display: inherit;
    }
  }

  &.is-vertical {
    flex-direction: column;
    align-items: flex-start;
  }

  &.isOfficeEditor {
    .container {
      display: block;

      .office-action-item {
        width: 300px;
        padding: 8px;
        display: flex;
        justify-content: space-between;
        cursor: pointer;

        &:hover {
          background-color: var(--blue-4);
        }

        &.disabled {
          cursor: default;
          background-color: inherit;
          color: var(--disabled-text);
        }

        .icon-title {
          display: flex;
          align-items: center;

          .Icon {
            margin-inline-end: 10px;
          }
        }

        .shortcut {
          display: flex;
          align-items: center;
        }
      }
    }
  }

  .divider {
    height: 1px;
    background: var(--divider);
    margin-top: 8px;
    margin-bottom: 8px;
    width: 100%;
  }
}
