@import './variables';
@import './elevation';
@import './list-common';

/** The mixins below are shared between md-menu and md-select */

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

$md-menu-item-height: 48px !default;
$md-menu-font-size: 16px !default;
$md-menu-side-padding: 16px !default;

@mixin md-menu-base() {
  @include md-elevation(2);
  min-width: $md-menu-overlay-min-width;
  max-width: $md-menu-overlay-max-width;

  overflow: auto;
  -webkit-overflow-scrolling: touch;   // for momentum scroll on mobile
}

@mixin md-menu-item-base() {
  @include md-truncate-line();

  display: flex;
  flex-direction: row;
  align-items: center;
  height: $md-menu-item-height;
  padding: 0 $md-menu-side-padding;

  font-size: $md-menu-font-size;
  font-family: $md-font-family;
  text-align: start;
  text-decoration: none;   // necessary to reset anchor tags

  &[disabled] {
    cursor: default;
  }

  md-icon {
    margin-right: 16px;

    [dir='rtl'] & {
      margin-left: 16px;
    }
  }
}

/**
 * This mixin adds the correct panel transform styles based
 * on the direction that the menu panel opens.
 */
@mixin md-menu-positions() {
  &.md-menu-after.md-menu-below {
    transform-origin: left top;
  }

  &.md-menu-after.md-menu-above {
    transform-origin: left bottom;
  }

  &.md-menu-before.md-menu-below {
    transform-origin: right top;
  }

  &.md-menu-before.md-menu-above {
    transform-origin: right bottom;
  }
}