// Import variables
@import '../../style';
@import '../variables';

ng-select.bootstrap {
  display: inline-block;
  margin: 0;
  position: relative;
  vertical-align: middle;
  width: 100%;

  * {
    box-sizing: border-box;
  }

  // Container.
  > div {
    display: block;
    width: 100%;
    // padding: $input-btn-padding-y $input-btn-padding-x;
    font-size: $font-size-base;
    line-height: $input-btn-line-height;
    color: $input-color;
    background-color: $input-bg;
    // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
    background-image: none;
    background-clip: padding-box;
    border: $input-btn-border-width solid $input-border-color;

    &.open {

    }

    &.focus {

    }

    &.below {
      @if $enable-rounded {
        border-radius: $input-border-radius;
      } @else {
        border-radius: 0;
      }
    }

    &.disabled {
      background-color: $custom-control-indicator-disabled-bg;
      color: $light;
      cursor: default;
      pointer-events: none;
    }

    >div.single {
      display: flex;
      height: 34px;
      width: 100%;

      >div.value,
      >div.placeholder {
        flex: 1;
        line-height: 34px;
        overflow: hidden;
        padding: 0 10px;
        white-space: nowrap;
      }

      >div.placeholder {
        color: $input-color;
      }

      >div.clear,
      >div.toggle {
        color: lighten($input-group-addon-color, 5%);
        line-height: 30px;
        text-align: center;
        width: 30px;

        &:hover {
          background-color: darken($dropdown-link-hover-bg, 5%);
        }
      }

      >div.clear {
        font-size:18px;
      }

      >div.toggle {
        font-size:14px;
      }
    }

    >div.multiple {
      display: flex;
      flex-flow: row wrap;
      height: 100%;
      min-height: 34px;
      padding: 0;
      width: 100%;

      >div.option {
        background-color: darken($input-bg, 5%);
        @if $enable-rounded {
          border-radius: $input-border-radius;
        } @else {
          border-radius: 0;
        }
    		border: 1px solid darken($input-border-color, 5%);
    		color: $blue;
    		display: inline-block;
    		font-size: .9em;
        padding: 0 5px 0 0;
        margin: 5px 0 0 5px;
        vertical-align: top;
        height: 24px;

        span.deselect-option {
          display: inline-block;
          color: $blue;
          cursor: pointer;
          font-size: .9em;
          height: 22px;
          line-height: 22px;
          border-right: 1px solid darken($input-border-color, 5%);
          padding: 0 5px;
          margin-right: 5px;

          &:hover {
            color: $input-group-addon-color;
            background-color: darken($dropdown-link-hover-bg, 5%);
            border-top: 1px solid darken($dropdown-link-hover-bg, 5%);
          }
        }
      }

      input {
        background-color: $input-bg;
        border: none;
        cursor: pointer;
        height: 34px;
        line-height: 34px;
        padding: 0;

        &:focus {
          outline: none;
        }

        &::placeholder {
          flex: 1;
          line-height: 34px;
          overflow: hidden;
          padding: 0 10px;
          white-space: nowrap;
        }
      }
    }
  }

  // Label.
  label {
    color: rgba(0, 0, 0, 0.38);
    display: block;
    font-size: 13px;
    padding: 4px 0;
  }

  select-dropdown {
    >div {
      &.below {
        border-top: none;
        background-color: $input-bg;
        border-color: $dropdown-border-color;
      }
      .filter {
        padding: 3px;
        width: 100%;

        input {
          background-color: $input-bg;
          color: $input-color;
          border: 1px solid $input-border-color;
          box-sizing: border-box;
          padding: 4px;
          width: 100%;
        }
      }
    }
    .selected {
      background-color: darken($input-bg, 5%);
      color: $light-blue;

      &.highlighted {
        background-color: $blue;
        color: $white;
      }
    }
    .highlighted {
      background-color: $blue;
      color: $white;
    }
    .disabled {
      background-color: $input-disabled-bg;
      color: $dropdown-link-disabled-color;
    }
  }
}
