.mat-mdc-menu-panel {
  &.mat-mdc-elevation-specific.mat-elevation-z8 {
    box-shadow: $box-shadow-default;
  }

  &.action-menu-panel {
    min-width: var(--action-menu-min-width, 180px);

    &.action-menu-panel--compact {
      --action-menu-min-width: #{calc-rem(120px)};
    }
  }
}

/* Material's menu styles are injected at runtime, so they land after this
   stylesheet and win every tie. The selectors below are deliberately one class
   heavier than the Material rules they counter. */
.mat-mdc-icon-button {
  .mat-icon.action-menu__trigger-icon {
    width: var(--action-menu-trigger-icon-size);
    height: var(--action-menu-trigger-icon-size);
    font-size: var(--action-menu-trigger-icon-size);
    line-height: var(--action-menu-trigger-icon-size);
    color: var(--action-menu-trigger-icon-color);

    &:hover {
      color: var(--action-menu-trigger-icon-color-hover);
    }
  }

  &:hover .mat-icon.action-menu__trigger-icon {
    color: var(--action-menu-trigger-icon-color-hover);
  }
}

.mat-mdc-menu-item {
  &.action-menu-item {
    color: var(--action-menu-item-color);

    .mat-icon.action-menu-item__icon {
      margin-right: var(--action-menu-item-icon-gap);
      width: var(--action-menu-item-icon-size);
      height: var(--action-menu-item-icon-size);
      font-size: var(--action-menu-item-icon-size);
      line-height: var(--action-menu-item-icon-size);
      color: inherit;

      &:hover {
        color: inherit;
      }
    }

    &.action-menu-item--destructive:not([disabled]):hover {
      background-color: var(--color-error-opacity);
    }
  }
}

.logout-btn {
  box-shadow: 0 -5px 10px -10px var(--color-gray-500);
}