open-vault/ui/app/styles/components/popup-menu.scss

.popup-menu-content {
  border-radius: 2px;
  margin: -2px 0 0 0;

  & > .box {
    border-radius: 2px;
    box-shadow: $box-shadow, $box-shadow-middle;
    padding: 0;
    position: relative;
    width: 200px;
  }

  &.is-wide > .box {
    width: $drawer-width;
  }

  .confirm-action span .button {
    display: block;
    margin: .25rem auto;
    width: 95%;
  }

  .menu {
    padding: $size-11 0;

    button.link,
    a,
    .menu-item {
      background: transparent;
      box-shadow: none;
      border: none;
      display: block;
      height: auto;
      font-size: $size-7;
      font-weight: $font-weight-semibold;
      padding: $size-9 $size-8;
      text-align: left;
      text-decoration: none;
      width: 100%;
    }

    button.link,
    a {
      color: $menu-item-color;
      &:hover {
        background-color: $menu-item-hover-background-color;
        color: $menu-item-hover-color;
      }

      &.is-active {
        background-color: $menu-item-active-background-color;
        color: $menu-item-active-color;
      }

      &.is-destroy {
        color: $red;

        &:hover {
          background-color: $red;
          color: $white;
        }
      }

      &.disabled {
        opacity: 0.5;
        
        &:hover {
          background: transparent;
          cursor: default;
        }
      }
    }

    small code {
      margin-left: $spacing-xs;
    }
  }

  .menu-label {
    color: $grey-dark;
    font-size: $size-9;
    font-weight: $font-weight-normal;
    letter-spacing: 0;
    margin: 0;
    padding: $size-10 $size-8 0;
    text-transform: uppercase;
  }

  .menu-content {
    padding: $size-10 $size-8;
  }

  hr {
    background-color: $ui-gray-200;
    margin: 0;
  }
}

.popup-menu-content p {
  box-shadow: none;
  padding-top: $size-10;
  font-weight: $font-weight-semibold;
}

.popup-menu-content .level-left {
  flex-shrink: 1;
}
.popup-menu-trigger {
  height: 2rem;
  min-width: 0;
  padding: 0 $size-10;
}

.status-menu-content {
  margin-top: 8px;

  .box {
    @include until($mobile) {
      width: $drawer-width - ($spacing-xs * 2);
    }
  }
}

.ember-basic-dropdown-content {
  &--left.popup-menu {
    margin: 0px 0 0 -8px;
  }

  &--below {
    &.ember-basic-dropdown--transitioning-in {
      animation: drop-fade-above .15s;
    }

    &.ember-basic-dropdown--transitioning-out {
      animation: drop-fade-above .15s reverse;
    }
  }

  &--above {
    &.ember-basic-dropdown--transitioning-in {
      animation: drop-fade-below .15s;
    }

    &.ember-basic-dropdown--transitioning-out {
      animation: drop-fade-below .15s reverse;
    }
  }
}