@import '../style/menu-common';
@import '../style/vendor-prefixes';
@import '../style/layout-common';
@import '../../../cdk/a11y/a11y';

.mat-option {
  @include mat-menu-item-base();
  position: relative;
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: row;
  max-width: 100%;
  box-sizing: border-box;
  align-items: center;
  -webkit-tap-highlight-color: transparent;

  &[aria-disabled='true'] {
    @include user-select(none);
    cursor: default;
  }

  .mat-optgroup &:not(.mat-option-multiple) {
    padding-left: $mat-menu-side-padding * 2;

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

  @include cdk-high-contrast {
    $high-contrast-border-width: 1px;

    // Add a margin to offset the border that we're adding to active option, in order
    // to avoid the options shifting as the user is moving through the list.
    margin: 0 $high-contrast-border-width;

    &.mat-active {
      // We use a border here, rather than an outline, because the outline will be cut off
      // by the `overflow: hidden` on the panel wrapping the options, whereas a border
      // will push the element inwards. This could be done using `outline-offset: -1px`,
      // however the property isn't supported on IE11.
      border: solid $high-contrast-border-width currentColor;
      margin: 0;
    }
  }
}

// Collapses unwanted whitespace created by newlines in code like the following:
// <mat-option>
//   {{value}}
// </mat-option>
.mat-option-text {
  display: inline-block;
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

  // Disable pointer events for the ripple container because the container will overlay the
  // user content and we don't want to disable mouse events on the user content.
  // Pointer events can be safely disabled because the ripple trigger element is the host element.
  pointer-events: none;

  // Prevents the ripple from completely covering the option in high contrast mode.
  @include cdk-high-contrast {
    opacity: 0.5;
  }
}

.mat-option-pseudo-checkbox {
  $margin: $mat-menu-side-padding / 2;
  margin-right: $margin;

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