@import "../../styles/variables";
@import "../../styles/mixins/ng-select";


:host {

  ng-select {
    min-height: 32px;
    background: transparent;
  }

  /deep/ .ng-select.ng-select-multiple .ng-value-container {
    position: relative;
  }

  line-height: initial;

  /deep/ .disabled .ng-value-container input {
    color: transparent;
  }

  /deep/ .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input {
    top: 0;
    height: 100%;

  }

  /deep/ .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder {
    top: 2px;
  }

  /deep/ .ng-value-container input {
    height: 100%;
    padding-top: 0;
  }

  /deep/ .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
    background: transparent !important;
    margin-bottom: 1px;
    margin-top: 1px;
  }

  /deep/ .ng-select.ng-select-multiple .ng-select-container .ng-value-container {
    padding-top: 0;
  }

  /deep/ .ng-select.ng-select-single .ng-select-container .ng-value-container input {
    height: 100%;
    padding: 0;
  }

  /deep/ .ng-select .ng-select-container {
    min-height: 32px;
    height: unset;
  }

  /deep/ .ng-select.ng-select-opened .ng-select-container {
    z-index: 1000;
  }

  /deep/ .ng-dropdown-panel {
    z-index: 1000;
  }

  /deep/ .ng-value {
    z-index: 100;
  }

  /deep/ .ng-input {
    z-index: 1;
  }

  /deep/ .ng-clear-wrapper {
    display: none !important;
  }

  /deep/ .ng-select-multiple .ng-value {
    background-color: transparent !important;
  }

  /deep/ .ng-dropdown-panel {
    margin-top: 5px;
  }

  &.dark {
    /deep/ .ng-select-container, /deep/ .ng-option, /deep/ .ng-dropdown-panel {
      background-color: $black;
      color: $light-periwinkle-two;
      border-radius: 0px !important;
    }
    /deep/ .ng-option.ng-option-selected, /deep/ .ng-option.ng-option-marked, /deep/ .ng-option.ng-option-selected.ng-option-marked {
      background-color: $dark-grey-blue;
      color: $light-periwinkle-two;
    }

    /deep/ .ng-select-container, /deep/ .ng-dropdown-panel, /deep/ .ng-dropdown-panel.ng-select-bottom {
      border: 1px solid $blue-400;
    }

    /deep/ .ng-dropdown-panel {
      margin-top: 10px;
    }

  }
}
