$select-input-placeholder:          $dp-greyscale-850;
$select-text-color:                 $dp-greyscale-850;

$select-input-height : 24px;
$select-padding-vertical: 10px;
$select-padding-horizontal: 8px;
//$select-input-internal-height: 24px;

$select-option-color: $dp-greyscale-850;

$select-input-border-color: $dp-greyscale-300;

.dp-select {
  @import "../../../node_modules/react-select/scss/default.scss";

  &, * {
    box-sizing: border-box;
  }
  font-family: $primary-font;
  font-weight: $pf-regular;

  height: 24px;
  font-size: $font-size-m;

  .Select-control {
    height: 24px;
    border-radius: $rad-size-m;
  }

  .Select-placeholder,
  &.Select--single > .Select-control .Select-value {
    line-height: 22px;
    height: 22px;
  }

  .Select-input {
    height: 22px;
    > input {
      padding: 4px 0 4px;
    }
  }

  .Select-arrow {
    border-width: 3px 3px 1.5px;
  }

  // placeholder
  .Select-placeholder,
  .Select--single > .Select-control .Select-value {
    font-style: italic;
  }

  .Select-menu-outer {
    border-color: $dp-sonic-primary;
    border-top: 0;
    .Select-option {
      padding: 5px 8px;
    }
  }
  &.Select.is-open > .Select-control {
    border-color: $dp-sonic-primary;
  }

  .dp-icon {
    position: absolute;
    left: 6px;
    z-index: $dp-zindex-bottom;
    color: $dp-greyscale-400;
    font-size: $icon-size-s;
    top: calc(50% - #{$icon-size-s / 2});
  }
  &.dp-input--with-icon {
    position: relative;
    flex: 1 0 auto;
    .Select-control,
    .Select-placeholder,
    .Select-value,
    .multiselect-native-select button {
      padding-left: 24px;
    }
    .Select-input {
      padding-left: 0;
    }
  }

  .is-disabled {
    > .Select-control {
      border-color: $dp-greyscale-200;
      background-color: $dp-greyscale-150;
      .Select-placeholder {
        color: $dp-greyscale-350;
      }
    }
    .dp-icon {
      color: $dp-greyscale-350;
    }
  }

  > .dp-select__input {
    position: relative;
    height: 24px;
    font-size: $font-size-m;
    font-family: $primary-font;
    font-weight: $pf-regular;
    color: $dp-greyscale-850;
    line-height: 24px;
    padding: 0 20px 0 6px;
    border-radius: $rad-size-m;
    border: 1px solid $select-input-border-color;
    background-color: $dp-greyscale-00;
    display: inline-block;
    cursor: pointer;
    user-select: none;
    .dp-select__arrow {
      position: absolute;
      top: calc(50% - 1px);
      right: 8px;
      border-width: 3px 3px 1.5px;
      border-style: solid;
      border-color: $dp-greyscale-850 transparent transparent;
      height: 0;
      width: 0;
      &.dp-select__arrow--opened {
        border-width: 1.5px 3px 3px;
        top: calc(50% - 3px);
        border-color: transparent transparent $dp-greyscale-850;
      }
    }
    &:hover {
      border-color: $dp-greyscale-450;
    }
  }
  > .dp-select__content {
    z-index: $dp-zindex-top;
    border-radius: $rad-size-m;
    border: 1px solid $dp-sonic-primary;
    background-color: $dp-greyscale-00;
    position: absolute;
    padding: 6px 6px;
    width: auto;
    > .dp-list {
      -webkit-margin-after: 0;
      -webkit-margin-before: 0;
    }
  }
  &.dp-select--disabled {
    .dp-select__input {
      border-color: $dp-greyscale-200;
      background-color: $dp-greyscale-150;
      color: $dp-greyscale-350;
      .dp-select__arrow {
        border-color: $dp-greyscale-350 transparent transparent;
      }
    }
  }
}