libs/barista-components/select/src/select.scss
@import '../../style/font-mixins';
@import '../../core/src/style/variables';
@import '../../core/src/style/form-control';
@import '../../core/src/style/interactive-common';

$dt-select-panel-max-height: 256px;
$dt-select-panel-max-width: 400px !default;
$dt-select-panel-min-width: 112px !default;

:host {
  display: inline-block;
  box-sizing: border-box;
  outline: none;
  @include dt-main-font();
  @include dt-form-control();

  // Do not allow it to grow outside its wrapper
  max-width: 100%;

  &:hover:not(.dt-select-disabled) {
    border-color: $gray-500;
    cursor: pointer;
  }

  &.dt-select-disabled {
    background-color: $gray-130;
    color: $disabledcolor;

    .dt-select-value .dt-select-placeholder {
      @include dt-form-control-disabled-placeholder();
    }
  }

  &.dt-select-open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .dt-form-field-infix > & {
    border: none;
    min-height: 30px;

    &.cdk-focused.cdk-keyboard-focused,
    &.cdk-focused.cdk-mouse-focused,
    &.cdk-focused.cdk-program-focused {
      /** Since the select is in a form field and the form field has an
     outline already, set the select to have no outline */
      outline: none;
    }
  }

  @include dt-cdkmonitor-focus-style();
}

.dt-select-trigger {
  display: flex;
  flex-direction: row;
  padding: 0 0 0 12px;
}

.dt-select-value {
  display: block;
  position: relative;
  flex-shrink: 1;
  flex-grow: 1;

  // Setting boundaries for it so it does not grow outside its container
  // 29px to give the text a bit more room to breath. Safari breaks line with
  // 30 px (30px is the trigger size)
  width: calc(100% - 29px);

  .dt-select-placeholder {
    @include dt-form-control-placeholder();
  }
}

.dt-select-value-text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:host .dt-select-arrow {
  display: flex;
  flex-shrink: 0;
  flex-grow: 0;
  align-items: center;
  justify-content: center;
  transform: rotate(0);
  transition: transform 150ms ease-out;
  width: 30px;
  height: 30px;

  // Override the icon size to 16px as defined in the styleguide
  ::ng-deep svg {
    width: 16px;
    height: 16px;
    fill: $turquoise-600;
  }
}

:host.dt-select-disabled .dt-select-arrow ::ng-deep svg {
  fill: $disabledcolor;
}

:host.dt-select-open .dt-select-arrow {
  transform: rotate(180deg);
}

.dt-select-panel {
  width: 100%;
  max-width: $dt-select-panel-max-width;
  background: #ffffff;
  box-sizing: border-box;
  border: 1px solid $disabledcolor;
  border-radius: 0 0 3px 3px;
  max-height: $dt-select-panel-max-height;
  min-width: $dt-select-panel-min-width;
  will-change: transform;

  // Prevents the content from repainting on scroll.
  backface-visibility: hidden;

  // Makes sure the opening scale animation starts from the top
  transform-origin: left top;
  overflow: auto;
  -webkit-overflow-scrolling: touch; // for momentum scroll on mobile
}

.dt-select-content {
  overflow: hidden;
}
