/**
 * @license
 * Copyright Akveo. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */
@import '../../styles/core/mixins';

@mixin nb-context-menu-theme() {
  nb-context-menu {
    $arrow-size: nb-theme(context-menu-arrow-size);
    $arrow-content-size: calc(#{$arrow-size} - 2px);

    border: 2px solid nb-theme(context-menu-border);
    border-radius: nb-theme(context-menu-border-radius);
    background: nb-theme(context-menu-bg);
    box-shadow: nb-theme(context-menu-shadow);

    .primitive-overlay {
      color: nb-theme(context-menu-fg);
    }

    .arrow {
      border-left: $arrow-size solid transparent;
      border-right: $arrow-size solid transparent;
      border-bottom: $arrow-size solid nb-theme(context-menu-border);

      &::after {
        position: absolute;
        content: ' ';
        width: 0;
        height: 0;
        top: 3px;
        left: calc(50% - #{$arrow-content-size});
        border-left: $arrow-content-size solid transparent;
        border-right: $arrow-content-size solid transparent;
        border-bottom: $arrow-content-size solid nb-theme(context-menu-bg);
      }
    }

    &.nb-overlay-bottom .arrow {
      top: calc(-#{$arrow-size} + 1px);
      left: calc(50% - #{$arrow-size});
    }

    &.nb-overlay-left .arrow {
      right: round(-$arrow-size - $arrow-size / 2 + 2px);
      top: calc(50% - #{$arrow-size / 2});
      transform: rotate(90deg);
    }

    &.nb-overlay-top .arrow {
      bottom: calc(-#{$arrow-size} + 1px);
      left: calc(50% - #{$arrow-size});
      transform: rotate(180deg);
    }

    &.nb-overlay-right .arrow {
      left: round(-$arrow-size - $arrow-size / 2 + 2px);
      top: calc(50% - #{$arrow-size / 2});
      transform: rotate(270deg);
    }
  }

  nb-menu.context-menu .menu-items .menu-item a {
    color: nb-theme(context-menu-fg);
    font-weight: nb-theme(font-weight-normal);

    .menu-icon {
      color: nb-theme(context-menu-fg);
    }

    @include hover-focus-active {
      color: nb-theme(context-menu-active-fg);
      background: nb-theme(context-menu-active-bg);
      font-weight: nb-theme(font-weight-normal);

      .menu-icon {
        color: nb-theme(context-menu-active-fg);
      }
    }
  }
}