_menu-common.scss

@use './private';
@use './list-common';
@use './layout-common';

// The mixins below are shared between mat-menu and mat-select

// menu width must be a multiple of 56px
$overlay-min-width: 112px !default;   // 56 * 2
$overlay-max-width: 280px !default;   // 56 * 5

$item-height: 48px !default;
$side-padding: 16px !default;
$icon-margin: 16px !default;


@mixin base() {
  min-width: $overlay-min-width;
  max-width: $overlay-max-width;
  overflow: auto;
  -webkit-overflow-scrolling: touch;   // for momentum scroll on mobile
}

@mixin item-base() {
  @include list-common.truncate-line();

  // Needs to be a block for the ellipsis to work.
  display: block;
  line-height: $item-height;
  height: $item-height;
  padding: 0 $side-padding;

  text-align: left;
  text-decoration: none;   // necessary to reset anchor tags

  // Required for Edge not to show scrollbars when setting the width manually. See #12112.
  max-width: 100%;

  &[disabled] {
    cursor: default;
  }

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

  .mat-icon {
    margin-right: $icon-margin;
    vertical-align: middle;

    svg {
      vertical-align: top;
    }

    [dir='rtl'] & {
      margin-left: $icon-margin;
      margin-right: 0;
    }
  }
}

@mixin item-submenu-trigger($side-padding, $triangle-height: 10px) {
  // Increase the side padding to prevent the indicator from overlapping the text.
  padding-right: $side-padding * 2;

  // Renders a triangle to indicate that the menu item will open a sub-menu.
  &::after {
    $size: private.private-div($triangle-height, 2);

    width: 0;
    height: 0;
    border-style: solid;
    border-width: $size 0 $size $size;
    border-color: transparent transparent transparent currentColor;
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    right: $side-padding;
    transform: translateY(-50%);
  }

  [dir='rtl'] & {
    padding-right: $side-padding;
    padding-left: $side-padding * 2;

    &::after {
      right: auto;
      left: $side-padding;
      transform: rotateY(180deg) translateY(-50%);
    }
  }
}

@mixin item-ripple() {
  @include layout-common.fill;

  // Prevent any pointer events on the ripple container for a menu item. The ripple container is
  // not the trigger element for the ripples and can be therefore disabled like that. Disabling
  // the pointer events ensures that there is no `click` event that can bubble up and cause
  // the menu panel to close.
  pointer-events: none;
}