@import '../core/style/menu-common';
@import '../core/style/list-common';
@import '../core/style/form-common';
@import '../core/a11y/a11y';

$md-select-trigger-height: 30px !default;
$md-select-trigger-min-width: 112px !default;
$md-select-arrow-size: 5px !default;
$md-select-arrow-margin: 4px !default;
$md-select-panel-max-height: 256px !default;

md-select {
  display: inline-block;
  outline: none;
}

.md-select-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: $md-select-trigger-height;
  min-width: $md-select-trigger-min-width;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;

  [aria-disabled='true'] & {
    @include md-control-disabled-underline();
    border-bottom: transparent;
    background-position: 0 bottom;
    cursor: default;
    user-select: none;
  }
}

.md-select-placeholder {
  position: relative;
  padding: 0 2px;
  transform-origin: left top;

  // These values are duplicated from animation code in order to
  // allow placeholders to sometimes float without animating,
  // for example when the value is set programmatically.
  // TODO(kara): Change when animations API supports skipping animation.
  &.md-floating-placeholder {
    top: -22px;
    left: -2px;
    transform: scale(0.75);
  }

  [dir='rtl'] & {
    transform-origin: right top;

    &.md-floating-placeholder {
      left: 2px;
    }
  }

  // TODO: Double-check accessibility of this style
  [aria-required=true] &::after {
    content: '*';
  }
}

.md-select-value {
  position: absolute;
  @include md-truncate-line();

  // Firefox and some versions of IE incorrectly keep absolutely
  // positioned children of flex containers in the flex flow when calculating
  // position. This has been fixed for Firefox 52, slated for early 2017.
  // Bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=874718
  //
  // In the meantime, we must adjust the left position to 0 to mimic where it
  // would be if it were correctly taken out of the flex flow. It's also necessary
  // to adjust the top value because absolutely positioned elements should not be
  // affected by the flex container's "align-items" property either. To center the text,
  // we must offset by 6px (6px top + 6px bottom + 18px text height = 30px total height).
  left: 0;
  top: 6px;

  [dir='rtl'] & {
    left: auto;
    right: 0;
  }
}

.md-select-arrow {
  width: 0;
  height: 0;
  border-left: $md-select-arrow-size solid transparent;
  border-right: $md-select-arrow-size solid transparent;
  border-top: $md-select-arrow-size solid;
  margin: 0 $md-select-arrow-margin;
}

.md-select-panel {
  @include md-menu-base();
  padding-top: 0;
  padding-bottom: 0;
  max-height: $md-select-panel-max-height;

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

md-option {
  @include md-menu-item-base();
  position: relative;
  cursor: pointer;
  outline: none;

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

.md-option-ripple {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  // In high contrast mode this completely covers the text.
  @include cdk-high-contrast {
    opacity: 0.5;
  }
}