@import "../scss/variables";

.context-menu {
  width: 300px;
  background-color: $site-bg-color-100;
  @include mat-elevation(4);
  z-index: 10;
  padding: 8px 0;
  user-select: none;
  border-radius: 4px;

  .context-menu-item {
    width: 100%;
    background-color: inherit;
    color: $site-text-color-400;
    border: none;
    font-size: 16px;
    height: 48px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    outline: none;

    &:not(:disabled) {
      .mat-icon {
        color: $site-text-color-300;
      }

      &:hover {
        background-color: rgba(0,0,0,.04);
      }
    }

    &:disabled {
      color: $site-text-color-200;
      cursor: default;
    }

    .mat-icon {
      margin-right: 16px;
    }

    .alt-text {
      margin-left: auto;
      color: $site-text-color-300;
      font-size: 14px;
    }

    .indent {
      margin-left: 40px;
    }
  }

  .separator {
    background-color: rgba(0,0,0,0.11);
    margin: 8px 0;
    height: 1px;
    max-height: 1px;
    min-height: 1px;
    width: 100%;
  }
}