<commit_before>@use 'sass:map';
@use '@angular/cdk';
@use '@angular/material' as mat;
@use '@material/menu-surface' as mdc-menu-surface;
@use '@material/list/evolution-mixins' as mdc-list-mixins;
@use '@material/list/evolution-variables' as mdc-list-variables;

@use '../mdc-helpers/mdc-helpers';

@include mdc-helpers.disable-fallback-declarations {
  @include mdc-menu-surface.core-styles($query: structure);
}

// Prevent rendering mat-menu as it can affect the flex layout.
mat-menu {
  display: none;
}

.mat-mdc-menu-content {
  @include mdc-list-mixins.list-base($query: structure);
}

.mat-mdc-menu-panel {
  @include cdk.high-contrast(active, off) {
    outline: solid 1px;
  }
}

// We need to increase the specificity for these styles to ensure we are not overridden by MDC's
// .mdc-menu-surface styles. This can happen if the MDC styles are loaded in after our styles.
.mat-mdc-menu-panel.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.private-menu-common-base;

  // The CDK positioning uses flexbox to anchor the element, whereas MDC uses `position: absolute`.
  // Furthermore, the relative position ensures that the `offsetParent` is the menu, rather than
  // the overlay. This comes into play when we measure the `offsetTop` of a menu item.
  position: relative;
}

.mat-mdc-menu-item {
  @include mdc-helpers.disable-fallback-declarations {
    @include mdc-list-mixins.item-base;
    @include mdc-list-mixins.item-spacing(
      mdc-list-variables.$side-padding, $query: mdc-helpers.$mat-base-styles-query);
  }

  // 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.private-button-common-reset;
  cursor: pointer;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
  color: inherit;
  font-size: inherit;
  background: none;
  text-decoration: none;
  margin: 0; // Resolves an issue where buttons have an extra 2px margin on Safari.

  // Set the `min-height` here ourselves, instead of going through
  // the `mdc-list-one-line-item-density` mixin, because it sets a `height`
  // which doesn't work well with multi-line items.
  $height-config: map.get(mdc-list-variables.$one-line-item-density-config, height);
  min-height: map.get($height-config, default);

  &[disabled] {
    cursor: default;

    // This is the same as `mdc-list-mixins.list-disabled-opacity` which
    // we can't use directly, because it comes with some selectors.
    opacity: mdc-list-variables.$content-disabled-opacity;

    // The browser prevents clicks on disabled buttons from propagating which prevents the menu
    // from closing, but clicks on child nodes still propagate which is inconsistent (see #16694).
    // In order to keep the behavior consistent and prevent the menu from closing, we add an overlay
    // on top of the content that will catch all the clicks while disabled.
    &::before {
      display: block;
      position: absolute;
      content: '';
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }
  }

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

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

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

  // Needs to be overwritten explicitly, because the style can
  // leak in from the list and cause the text to truncate.
  .mdc-list-item__primary-text {
    white-space: normal;
  }

  @include cdk.high-contrast(active, off) {
    $outline-width: 1px;

    // We need to move the item 1px down, because Firefox seems to have
    // an issue rendering the top part of the outline (see #21524).
    margin-top: $outline-width;

    &.cdk-program-focused,
    &.cdk-keyboard-focused,
    &-highlighted {
      outline: dotted $outline-width;
    }
  }
}

.mat-mdc-menu-item-submenu-trigger {
  @include mat.private-menu-common-item-submenu-trigger(mdc-list-variables.$side-padding);
}

.mat-mdc-menu-submenu-icon {
  @include mat.private-menu-common-item-submenu-icon(mdc-list-variables.$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.private-menu-common-item-ripple;
}<commit_msg>fix(material-experimental/mdc-list): avoid style conflicts with MDC list<commit_after>@use 'sass:map';
@use '@angular/cdk';
@use '@angular/material' as mat;
@use '@material/menu-surface' as mdc-menu-surface;
@use '@material/list/evolution-mixins' as mdc-list-mixins;
@use '@material/list/evolution-variables' as mdc-list-variables;

@use '../mdc-helpers/mdc-helpers';

@include mdc-helpers.disable-fallback-declarations {
  @include mdc-menu-surface.core-styles($query: structure);
}

// Prevent rendering mat-menu as it can affect the flex layout.
mat-menu {
  display: none;
}

.mat-mdc-menu-content {
  @include mdc-list-mixins.list-base($query: structure);
}

.mat-mdc-menu-panel {
  @include cdk.high-contrast(active, off) {
    outline: solid 1px;
  }
}

// We need to increase the specificity for these styles to ensure we are not overridden by MDC's
// .mdc-menu-surface styles. This can happen if the MDC styles are loaded in after our styles.
.mat-mdc-menu-panel.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.private-menu-common-base;

  // The CDK positioning uses flexbox to anchor the element, whereas MDC uses `position: absolute`.
  // Furthermore, the relative position ensures that the `offsetParent` is the menu, rather than
  // the overlay. This comes into play when we measure the `offsetTop` of a menu item.
  position: relative;
}

.mat-mdc-menu-item {
  @include mdc-helpers.disable-fallback-declarations {
    @include mdc-list-mixins.item-base;
    @include mdc-list-mixins.item-spacing(
      mdc-list-variables.$side-padding, $query: mdc-helpers.$mat-base-styles-query);
  }

  // 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.private-button-common-reset;
  cursor: pointer;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
  color: inherit;
  font-size: inherit;
  background: none;
  text-decoration: none;
  margin: 0; // Resolves an issue where buttons have an extra 2px margin on Safari.

  // Set the `min-height` here ourselves, instead of going through
  // the `mdc-list-one-line-item-density` mixin, because it sets a `height`
  // which doesn't work well with multi-line items.
  $height-config: map.get(mdc-list-variables.$one-line-item-density-config, height);
  min-height: map.get($height-config, default);

  // If the MDC list is loaded after the menu, this gets overwritten which breaks the text
  // alignment. Ideally we'd wrap all the MDC mixins above with this selector, but the increased
  // specificity breaks some internal overrides.
  &.mdc-list-item {
    align-items: center;
  }

  &[disabled] {
    cursor: default;

    // This is the same as `mdc-list-mixins.list-disabled-opacity` which
    // we can't use directly, because it comes with some selectors.
    opacity: mdc-list-variables.$content-disabled-opacity;

    // The browser prevents clicks on disabled buttons from propagating which prevents the menu
    // from closing, but clicks on child nodes still propagate which is inconsistent (see #16694).
    // In order to keep the behavior consistent and prevent the menu from closing, we add an overlay
    // on top of the content that will catch all the clicks while disabled.
    &::before {
      display: block;
      position: absolute;
      content: '';
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }
  }

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

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

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

  // Needs to be overwritten explicitly, because the style can
  // leak in from the list and cause the text to truncate.
  .mdc-list-item__primary-text {
    white-space: normal;
  }

  &.mat-mdc-menu-item-submenu-trigger {
    @include mat.private-menu-common-item-submenu-trigger(mdc-list-variables.$side-padding);
  }

  @include cdk.high-contrast(active, off) {
    $outline-width: 1px;

    // We need to move the item 1px down, because Firefox seems to have
    // an issue rendering the top part of the outline (see #21524).
    margin-top: $outline-width;

    &.cdk-program-focused,
    &.cdk-keyboard-focused,
    &-highlighted {
      outline: dotted $outline-width;
    }
  }
}

.mat-mdc-menu-submenu-icon {
  @include mat.private-menu-common-item-submenu-icon(mdc-list-variables.$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.private-menu-common-item-ripple;
}
{'fraction_non_alphanumeric': 0.11963929957009542, 'fraction_numerical': 0.004823319702212436, 'mean_word_length': 3.2259636685866195, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '124058', 'n_tokens_mistral': 3143, 'n_tokens_neox': 2993, 'n_words': 953}