@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$contextmenu: () !default;
$contextmenu: map.merge(
  (
    z-index: value('z-index-popper'),
    icon-color: value('content-color-secondary'),
    shortcut-color: value('content-color-disabled'),
    shortcut-offset: 30px
  ),
  $contextmenu
);

.#{$namespace}-contextmenu {
  &-vars {
    @include define-preset-values('contextmenu', $contextmenu);
  }

  @include basis {
    position: fixed;
    z-index: value('contextmenu-z-index');
  }

  & &__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 180px;
    padding: 5px 10px;
    font-size: 13px;
  }

  &__list--icons &__item {
    padding-inline-start: 28px;
  }

  &__list--no-icon &__item {
    padding-inline-start: 10px;
  }

  &__list--arrows &__item {
    padding-inline-end: 28px;
  }

  &__list--no-arrow &__item {
    padding-inline-end: 10px;
  }

  &__icon {
    position: absolute;
    inset-inline-start: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    color: value('contextmenu-icon-color');
  }

  &__shortcut {
    margin-inline-start: value('contextmenu-shortcut-offset');
    color: value('contextmenu-shortcut-color');
  }

  &__arrow {
    inset-inline: auto 6px;
  }
}