// custom theming for ng-select
// stylelint-disable
.ng-select.ng-select-opened > .ng-select-container
{
  border-color: $border-color-primary;
  background: $coconut;
}

.ng-select.ng-select-opened > .ng-select-container:hover
{
  box-shadow: none;
}

.ng-select.ng-select-opened > .ng-select-container .ng-arrow
{
  top: -2px;
  border-width: 0 5px 5px;
  border-color: transparent transparent $font-color-primary;
}

.ng-select.ng-select-opened > .ng-select-container .ng-arrow:hover
{
  border-color: transparent transparent $midnight;
}

.ng-select.ng-select-opened.ng-select-bottom > .ng-select-container
{
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.ng-select.ng-select-opened.ng-select-top > .ng-select-container
{
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.ng-select.ng-select-disabled > .ng-select-container
{
  box-shadow: none;
  border-color: rgba($border-color-primary, 0.5);
  background: $coconut;
  color: $font-color-secondary;
}

.ng-select.ng-select-disabled > .ng-select-container:hover
{
  box-shadow: none;
  cursor: not-allowed;
}

.ng-select .ng-has-value .ng-placeholder
{
  display: none;
}

.ng-select .ng-select-container
{
  align-items: center;
  min-height: 30px;
  border-radius: 0;
  border: 1px solid $border-color-primary;
  background-color: $coconut;
}

.ng-select .ng-select-container:hover
{
  box-shadow: 0 1px 0 rgba($midnight, 0.06);
}

.ng-select .ng-select-container .ng-value-container
{
  align-items: center;
  padding-left: 10px;
}

[dir="rtl"] .ng-select .ng-select-container .ng-value-container
{
  padding-right: 10px;
  padding-left: 0;
}

.ng-select .ng-select-container .ng-value-container .ng-placeholder,
.ng-select.ng-select-disabled > .ng-select-container .ng-value-container .ng-placeholder
{
  opacity: 1;
  color: $font-color-secondary;
}

.ng-select.ng-select-single .ng-select-container
{
  height: 30px;
}

.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input
{
  top: 5px;
  left: 0;
  padding-right: 50px;
  padding-left: 10px;
}

[dir="rtl"] .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input
{
  padding-right: 10px;
  padding-left: 50px;
}

.ng-select.ng-select-multiple.ng-select-disabled > .ng-select-container .ng-value-container .ng-value
{
  border: 1px solid $border-color-secondary;
  background-color: $coconut;
}

.ng-select.ng-select-multiple.ng-select-disabled > .ng-select-container .ng-value-container .ng-value .ng-value-label
{
  padding: 0 5px;
}

.ng-select.ng-select-multiple .ng-select-container .ng-value-container
{
  padding-top: 5px;
  padding-left: 7px;
}

[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container
{
  padding-right: 7px;
  padding-left: 0;
}

.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value
{
  margin-right: 5px;
  margin-bottom: 5px;
  border-radius: 0;
  background-color: $accent-color-primary;
  color: $coconut;
  font-size: 0.9em;

  &.ng-value-custom
  {
    background-color: transparent;
    color: $font-color-primary;
    font-size: 1rem;
  }
}

[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value
{
  margin-right: 0;
  margin-left: 5px;
}

.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled
{
  background-color: $coconut;
}

.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label
{
  padding-left: 5px;
}

[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label
{
  padding-right: 5px;
  padding-left: 0;
}

.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-tag
{
  display: inline-block;
  padding: 1px 5px;
}

.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon
{
  display: inline-block;
  padding: 1px 5px;
}

.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover
{
  background-color: $accent-color-primary-hover;
  color: $coconut;
}

.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left
{
  border-right: 1px solid $coconut;
}

[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left
{
  border-right: none;
  border-left: 1px solid $coconut;
}

.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right
{
  border-left: 1px solid $coconut;
}

[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right
{
  border-right: 1px solid $coconut;
  border-left: 0;
}

.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input
{
  padding: 0 0 3px 3px;
}

[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input
{
  padding: 0 3px 3px 0;
}

.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder
{
  top: 5px;
  padding-bottom: 5px;
  padding-left: 3px;
}

[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder
{
  padding-right: 3px;
  padding-left: 0;
}

.ng-select .ng-clear-wrapper
{
  color: $font-color-primary;
}

.ng-select .ng-clear-wrapper:hover .ng-clear
{
  color: $feedback-color-warning;
}

.ng-select .ng-spinner-zone
{
  padding: 5px 5px 0 0;
}

[dir="rtl"] .ng-select .ng-spinner-zone
{
  padding: 5px 0 0 5px;
}

.ng-select .ng-arrow-wrapper
{
  width: 25px;
  padding-right: 5px;
}

[dir="rtl"] .ng-select .ng-arrow-wrapper
{
  padding-right: 0;
  padding-left: 5px;
}

.ng-select .ng-arrow-wrapper:hover .ng-arrow
{
  border-top-color: $midnight;
}

.ng-select .ng-arrow-wrapper .ng-arrow
{
  border-width: 5px 5px 2.5px;
  border-style: solid;
  border-color: $midnight transparent transparent;
}

.ng-dropdown-panel.ng-dropdown-panel
{
  left: 0;
  z-index: 1000;
  box-shadow: 0 1px 0 rgba($midnight, 0.06);
  border: 1px solid $border-color-primary;
  background-color: $coconut;
}

.ng-dropdown-panel.ng-select-bottom
{
  top: 100%;
  margin-top: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-color: $border-color-primary;
}

.ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child
{
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.ng-dropdown-panel.ng-select-top
{
  bottom: 100%;
  margin-bottom: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-color: $border-color-primary;
}

.ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child
{
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.ng-dropdown-panel .ng-dropdown-header
{
  border-bottom: 1px solid $border-color-primary;
  padding: 5px 7px;
}

.ng-dropdown-panel .ng-dropdown-footer
{
  border-top: 1px solid $border-color-primary;
  padding: 5px 7px;
}

.ng-dropdown-panel .ng-dropdown-panel-items
{
  margin: 4px 0 2px;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup
{
  padding: 6px 10px;
  color: $font-color-primary;
  font-weight: $font-weight-semi-bold;
  cursor: pointer;
  user-select: none;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled
{
  cursor: default;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked
{
  background-color: $accent-color-primary;
}

.ng-select.is-grouped .ng-dropdown-panel .ng-dropdown-panel-items .ng-option:not(.ng-option-child),
.ng-select.is-grouped .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup:not(:first-of-type)
{
  border-top: 1px solid $border-color-secondary;
  font-weight: $font-weight-semi-bold;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked
{
  background-color: $accent-color-primary;
  font-weight: $font-weight-semi-bold;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option
{
  margin-bottom: 2px;
  padding: 6px 10px;
  background-color: $coconut;
  color: $font-color-primary;
  white-space: normal !important; // override internal styles from ng-select
}

.custom-button-option.ng-dropdown-panel .ng-dropdown-panel-items .ng-option:nth-last-child(-n + 3)
{
  margin-bottom: 5px;
  border-bottom: 1px solid $storm;
}

.custom-button-option.ng-dropdown-panel .ng-dropdown-panel-items .ng-option:nth-last-child(-n + 2)
{
  min-width: 100px;
  min-height: 30px;
  border: 1px solid $accent-color-primary;
  padding: 5px 10px;
  background: $coconut;
  color: $accent-color-primary;
  font-weight: $font-weight-regular;
  font-size: $font-size-md;
  text-align: center;

  &:hover
  {
    background: $accent-color-primary-hover;
    color: $coconut;
    transition: all 0.3s;
  }
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked
{
  background-color: $accent-color-primary;
  color: $coconut;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label
{
  font-weight: $font-weight-semi-bold;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked
{
  background-color: $accent-color-primary;
  color: $coconut;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled
{
  color: $font-color-secondary;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child
{
  padding-left: 33px;
}

[dir="rtl"] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child
{
  padding-right: 22px;
  padding-left: 0;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label
{
  padding-right: 5px;
  font-weight: $font-weight-regular;
  font-size: 80%;
}

[dir="rtl"] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label
{
  padding-right: 0;
  padding-left: 5px;
}

[dir="rtl"] .ng-dropdown-panel
{
  direction: rtl;
  text-align: right;
}

.ng-select-multiple .ng-dropdown-panel .ng-dropdown-panel-items .ng-option
{
  &.ng-option-selected,
  &.ng-option-selected.ng-optgroup
  {
    background-color: transparent;
    color: $font-color-primary;

    &.ng-option-disabled
    {
      color: $font-color-secondary;
    }
  }

  .ng-select.ng-select-multiple > .ng-select-container > .ng-value-container .ng-value
  {
    &.ng-value-additional
    {
      background: transparent;
      color: $font-color-primary;

      .ng-value-label
      {
        padding: 0;
      }
    }

    .ng-value-label
    {
      padding: 0 5px;
    }
  }
}

.ng-select.ng-select-multiple.ng-select-disabled .ng-select-container .ng-value-container .ng-value
{
  background-color: $storm;

  &.ng-value-custom
  {
    background-color: transparent;
    border: 0;
  }
}

// Fake checkbox for multi-select
// Any changes made here should be reflected in the checkbox styles also
.decorative-checkbox-container
{
  display: flex;
  line-height: 17px;
  cursor: pointer;

  .decorative-checkbox // checkmark
  {
    position: relative;
    height: 16px;
    margin-right: 7px;
    border: 1px solid $border-color-primary;
    background: $coconut;
    flex: 0 0 16px;

    &.is-checked
    {
      border: transparent;
      background: $accent-color-primary;

      &::after
      {
        position: absolute;
        top: 0;
        left: 0;
        content: $icon-checkmark;
        color: $coconut;
        font-weight: $font-weight-semi-bold;
        font-size: 16px;
        font-family: $font-family-icon;
        transform: scale(0.75);
      }
    }

    &:focus
    {
      box-shadow: $box-shadow-focus-default;
    }

    &.is-disabled
    {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
}

// Marked checkbox (hover & focus)
.ng-option-marked .decorative-checkbox-container .decorative-checkbox.is-checked
{
  background: $coconut;

  &::after
  {
    color: $accent-color-primary;
  }
}

.multi-select .ng-input
{
  position: absolute;
}

.option-text-secondary
{
  color: $font-color-secondary;
}

.ng-option-marked .option-text-secondary,
.ng-option-selected .option-text-secondary
{
  color: $coconut;
}

// ng select with add on
.input-group > .ng-select
{
  flex-grow: 1;
}