/* CONTEXT MENU */
%appMount {
  %contextMenu {
    padding: 2px 3px;
    background: rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    animation: cv-menu-fold-y 0.2s cubic-bezier(0.2, 0.6, 0.5, 1.1);
    transform-origin: 50% 0;
    z-index: 3003;
  }
}
%contextMenu {
  %contextMenuItemGroup {
    border-top-color: hsla(0, 0%, 100%, 0.04);
  }
  %contextMenuItem {
    background-color: transparent;
    color: hsla(0, 0%, 100%, 0.6);
    border-radius: 3px;
    transition: all 0.15s ease-in-out;
    &:hover {
      background-color: rgba(0, 0, 0, 0.8);
      color: #fff;
    }
    &%contextMenuItemBrand {
      color: hsla(0, 0%, 100%, 0.6) !important;
      &:hover {
        color: #fff !important;
      }
    }
    &%contextMenuItemDanger {
      position: relative;
      background-color: transparent;
      color: hsla(0, 0%, 100%, 0.6) !important;
      width: calc(100% - 4px);
      margin: 2px;
      &:after {
        content: '';
        position: absolute;
        @include stretch;
        background: cv('colors.danger');
        opacity: 0.5;
        transition: inherit;
        z-index: -1;
      }
      &:hover {
        color: #fff !important;
        &:after {
          opacity: 0.7;
        }
      }
    }
  }
}
%subContextMenu {
  margin: 0 -5px;
  %contextMenu {
    transform-origin: 50% 50%;
  }
}