@import '@material/menu-surface/mixins';
@import '@material/list/mixins';
@import '@material/list/variables';
@import '../../material/core/style/menu-common';
@import '../../material/core/style/button-common';
@import '../../cdk/a11y/a11y';

@include mdc-menu-surface-core-styles($query: structure);

.mat-mdc-menu-content {
  // Note that we include this private mixin, because the public
  // one adds a bunch of styles that we aren't using for the menu.
  @include mdc-list-base_($query: structure);
}

.mat-mdc-menu-panel {
  // Include Material's base menu panel styling which contain the `min-width`, `max-width` and some
  // styling to make scrolling smoother. MDC doesn't include the `min-width` and `max-width`, even
  // though they're explicitly defined in spec.
  @include mat-menu-base;

  // The CDK positioning uses flexbox to anchor the element, whereas MDC uses `position: absolute`.
  position: static;

  @include cdk-high-contrast {
    outline: solid 1px;
  }
}

.mat-mdc-menu-item {
  // Note that we include this private mixin, because the public
  // one adds a bunch of styles that we aren't using for the menu.
  @include mdc-list-item-base_;

  // MDC's menu items are `<li>` nodes which don't need resets, however ours
  // can be anything, including buttons, so we need to do the reset ourselves.
  @include mat-button-reset;
  cursor: pointer;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
  color: inherit;
  font-size: inherit;
  background: none;
  text-decoration: none;

  &[disabled] {
    // Usually every click inside the menu closes it, however some browsers will stop events
    // when the user clicks on a disabled item, **except** when the user clicks on a non-disabled
    // child node of the disabled button. This is inconsistent because some regions of a disabled
    // button will still cause the menu to close and some won't (see #16694). We make the behavior
    // more consistent by disabling pointer events and allowing the user to click through.
    pointer-events: none;
    cursor: default;
  }

  .mat-icon {
    margin-right: $mdc-list-side-padding;
  }

  [dir='rtl'] & {
    text-align: right;

    .mat-icon {
      margin-right: 0;
      margin-left: $mdc-list-side-padding;
    }
  }

  @include cdk-high-contrast {
    &.cdk-program-focused,
    &.cdk-keyboard-focused,
    &-highlighted {
      outline: dotted 1px;
    }
  }
}

// Renders out a chevron on menu items that trigger a sub-menu.
.mat-mdc-menu-item-submenu-trigger {
  @include mat-menu-item-submenu-trigger($mdc-list-side-padding);
}

// Increase specificity because ripple styles are part of the `mat-core` mixin and can
// potentially overwrite the absolute position of the container.
.mat-mdc-menu-item .mat-mdc-menu-ripple {
  @include mat-menu-item-ripple;
}