@import '../core/style/menu-common';
@import '../core/style/list-common';
@import '../core/style/variables';
@import '../core/style/vendor-prefixes';
@import '../../cdk/a11y/a11y';

$mat-select-arrow-size: 5px !default;
$mat-select-arrow-margin: 4px !default;
$mat-select-panel-max-height: 256px !default;
$mat-select-item-height: 3em !default;

$mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-arrow-margin);

.mat-select {
  display: inline-block;
  width: 100%;
  outline: none;
}

.mat-select-trigger {
  display: inline-table;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;

  .mat-select-disabled & {
    @include user-select(none);
    cursor: default;
  }
}

.mat-select-value {
  display: table-cell;
  max-width: 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mat-select-value-text {
  @include mat-truncate-line();
}

.mat-select-arrow-wrapper {
  display: table-cell;
  vertical-align: middle;

  // When used in a box appearance form-field the arrow should be shifted up 50%.
  .mat-form-field-appearance-fill & {
    transform: translateY(-50%);
  }

  // When used in a outline form-field the arrow should be shifted up 25%.
  .mat-form-field-appearance-outline & {
    transform: translateY(-25%);
  }

  // When used in a standard appearance form-field the arrow should be shifted up 50%,
  // but only if it's not empty and it has a label.
  .mat-form-field-appearance-standard.mat-form-field-has-label
    .mat-select:not(.mat-select-empty) & {
      transform: translateY(-50%);
    }

  // Animate the arrow position, but only when the transitioning to empty (animate the arrow down)
  // This is in line with the mat-form-field label animation
  .mat-form-field-appearance-standard .mat-select.mat-select-empty & {
    transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
  }

  ._mat-animation-noopable.mat-form-field-appearance-standard .mat-select.mat-select-empty & {
    transition: none;
  }
}

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

.mat-select-panel-wrap {
  // Prevents width-issues of mat-select-panel with width: calc(100% + 32px)
  // in IE11 due to the parents display: flex;
  flex-basis: 100%;
}

.mat-select-panel {
  @include mat-menu-base();
  padding-top: 0;
  padding-bottom: 0;
  max-height: $mat-select-panel-max-height;
  min-width: 100%; // prevents some animation twitching and test inconsistencies in IE11
  border-radius: 4px;

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

// Override optgroup and option to scale based on font-size of the trigger.
.mat-select-panel {
  .mat-optgroup-label,
  .mat-option {
    font-size: inherit;
    line-height: $mat-select-item-height;
    height: $mat-select-item-height;
  }
}

.mat-form-field-type-mat-select {
  &:not(.mat-form-field-disabled) .mat-form-field-flex {
    cursor: pointer;
  }

  .mat-form-field-label {
    width: calc(100% - #{$mat-select-placeholder-arrow-space});
  }
}

.mat-select-placeholder {
  // Delay the transition until the label has animated about a third of the way through, in
  // order to prevent the placeholder from overlapping for a split second.
  transition: color $swift-ease-out-duration $swift-ease-out-duration / 3
      $swift-ease-out-timing-function;

  ._mat-animation-noopable & {
    transition: none;
  }

  .mat-form-field-hide-placeholder & {
    color: transparent;

    // Overwrite browser specific CSS properties that can overwrite the `color` property.
    // Some developers seem to use this approach to easily overwrite the placeholder / label color.
    -webkit-text-fill-color: transparent;

    // Remove the transition to prevent the placeholder
    // from overlapping when the label comes back down.
    transition: none;
    // Prevents the '...' from showing on the parent element.
    display: block;
  }
}