$select-option-height: 48px;
$select-option-padding: 16px;
$select-container-padding: 16px;
$select-container-transition-duration: 350ms;

$select-max-visible-options: 5;

.md-select-menu-container {
  position: fixed;
  left: 0;
  top: 0;
  z-index: $z-index-select;
  opacity: 0;

  // Don't let the user select a new choice while it's animating
  &:not(.md-clickable) {
    pointer-events: none;
  }

  md-progress-circular {
    display: table;
    margin: 3*$baseline-grid auto !important;
  }


  // enter: md-select scales in, then options fade in.
  &.md-active {
    opacity: 1;
    md-select-menu {
      transition: $swift-ease-out;
      transition-duration: 150ms;
      > * {
        opacity: 1;
        transition: $swift-ease-in;
        transition-duration: 150ms;
        transition-delay: 100ms;
      }
    }
  }

  // leave: the container fades out
  &.md-leave {
    opacity: 0;
    transition: $swift-ease-in;
    transition-duration: 250ms;
  }
}

md-input-container > md-select {
  margin: auto 0 0 0;
  order: 2;
}

md-select {
  display: flex;
  margin: 2.5*$baseline-grid 0 3*$baseline-grid + 2 0;
  &[disabled] .md-select-value {
    background-position: 0 bottom;
    // This background-size is coordinated with a linear-gradient set in select-theme.scss
    // to create a dotted line under the input.
    background-size: 4px 1px;
    background-repeat: repeat-x;
    margin-bottom: -1px; // Shift downward so dotted line is positioned the same as other bottom borders
  }
  &:focus {
    outline: none;
  }
  &[disabled]:hover {
    cursor: default;
  }
  &:not([disabled]) {
    &:hover {
      cursor: pointer
    }
    &.ng-invalid.ng-dirty {
      .md-select-value {
        border-bottom: 2px solid;
        padding-bottom: 0;
      }
    }
    &:focus {
      .md-select-value {
        border-bottom-width: 2px;
        border-bottom-style: solid;
        padding-bottom: 0;
      }
    }
  }
}


.md-select-value {
  display: flex;
  align-items: center;
  padding: 2px 2px 1px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  background-color: rgba(0,0,0,0);
  position: relative;
  box-sizing: content-box;
  min-width: 8 * $baseline-grid;
  min-height: 26px;
  flex-grow: 1;

  *:first-child {
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: calc(100% - 2*#{$baseline-grid});
    transform: translate3d(0, 2px, 0);
  }

  .md-select-icon {
    display: block;
    align-items: flex-end;
    text-align: end;
    width: 3 * $baseline-grid;
    margin: 0 .5 * $baseline-grid;
    transform: translate3d(0, 1px, 0);
  }

  .md-select-icon:after {
    display: block;
    content: '\25BC';
    position: relative;
    top: 2px;
    speak: none;
    transform: scaleY(0.6) scaleX(1);
  }

  &.md-select-placeholder {
    display: flex;
    order: 1;
    pointer-events: none;
    -webkit-font-smoothing: antialiased;
    padding-left: 2px;
    z-index: 1;
  }
}

md-select-menu {
  display: flex;
  flex-direction: column;
  &.md-reverse {
    flex-direction: column-reverse;
  }

  &:not(.md-overflow) {
    md-content {
      padding-top: $baseline-grid;
      padding-bottom: $baseline-grid;
    }
  }

  box-shadow: $whiteframe-shadow-1dp;
  max-height: ($select-option-height * $select-max-visible-options) + 2 * $baseline-grid;
  min-height: $select-option-height;
  overflow-y: hidden;

  @include rtl(transform-origin, left top, right top);

  transform: scale(1.0);

  md-content {
    min-width: 136px;
    min-height: $select-option-height;
    max-height: ($select-option-height * $select-max-visible-options) + 2 * $baseline-grid;
    overflow-y: auto;
  }
  > * {
    opacity: 0;
  }
}

md-option {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  width: auto;

  &:focus {
    outline: none;
  }

  .md-text {
    @include not-selectable();
    width: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: rem(1.6);
  }
  padding: 0 $select-option-padding 0 $select-option-padding;
  height: $select-option-height;
}

md-optgroup {
  display: block;
  label {
    display: block;
    font-size: rem(1.4);
    text-transform: uppercase;
    padding: $baseline-grid * 2;
    font-weight: 500;
  }
  md-option {
    padding-left: $select-option-padding * 2;
    padding-right: $select-option-padding * 2;
  }
}

@media screen and (-ms-high-contrast: active) {
  .md-select-backdrop {
    background-color: transparent;
  }
  md-select-menu {
    border: 1px solid #fff;
  }
}
