$animation: loader-animation 600ms infinite linear;
$inset: inset 0 1px 1px rgba(0, 0, 0, 0.075);
$placeholder-color: #999;

.rbt {
  &-menu {
    margin-bottom: 2px; // Spacing for dropup

    & > li a {
      overflow: hidden;
      text-overflow: ellipsis;

      &:focus {
        outline: none;
      }
    }

    &-pagination-option {
      text-align: center;
    }
  }

  // Hide IE's native "clear" button
  & .rbt-input-main::-ms-clear {
    display: none;
  }

  &-input-multi {
    cursor: text;
    overflow: hidden;
    position: relative;
    height: auto;

    // Apply Bootstrap focus styles
    &.focus {
      box-shadow: $inset, 0 0 8px rgba(102, 175, 233, 0.6);
      border-color: #66afe9;
      outline: 0;
    }

    // BS4 uses the :disabled pseudo-class, which doesn't work with non-inputs.
    &.form-control[disabled] {
      background-color: #e9ecef;
      opacity: 1;
    }

    // Apply Bootstrap placeholder styles
    input {
      // Firefox
      &::-moz-placeholder {
        color: $placeholder-color;
        opacity: 1;
      }

      // Internet Explorer 10+
      &:-ms-input-placeholder {
        color: $placeholder-color;
      }

      // Safari and Chrome
      &::-webkit-input-placeholder  {
        color: $placeholder-color;
      }
    }

    .rbt-input-wrapper {
      align-items: flex-start;
      display: flex;
      flex-wrap: wrap;
      margin-bottom: -4px;
      margin-top: -1px;
      overflow: hidden;
    }

    .rbt-input-main {
      // Set input height for cross-browser consistency
      height: 20px;
      margin: 1px 0 4px;
    }

    &.input,
    &.form-control {
      &-lg {
        .rbt-input-main {
          height: 24px;
        }
      }

      &-sm {
        .rbt-input-main {
          height: 18px;
        }
      }
    }
  }

  &-close {
    z-index: 1;

    &-lg {
      font-size: 24px;
    }
  }

  &-token {
    background-color: #e7f4ff;
    border: 0;
    border-radius: 2px;
    color: #1f8dd6;
    display: inline-block;
    line-height: 1em;
    margin: 0 3px 3px 0;
    padding: 4px 7px;
    position: relative;

    &-disabled {
      background-color: #ddd;
      color: #888;
      pointer-events: none;
    }

    &-removeable {
      cursor: pointer;
      padding-right: 21px;
    }

    &-active {
      background-color: #1f8dd6;
      color: #fff;
      outline: none;
      text-decoration: none;
    }

    & &-remove-button {
      bottom: 0;
      color: inherit;
      font-size: inherit;
      font-weight: normal;
      opacity: 1;
      outline: none;
      padding: 3px 7px;
      position: absolute;
      right: 0;
      text-shadow: none;
      top: -2px;
    }
  }

  &-loader {
    -moz-animation: $animation;
    -webkit-animation: $animation;
    animation: $animation;
    border: 1px solid #d5d5d5;
    border-radius: 50%;
    border-top-color: #1f8dd6;
    display: block;
    height: 16px;
    width: 16px;

    &-lg {
      height: 20px;
      width: 20px;
    }
  }

  &-aux {
    align-items: center;
    display: flex;
    bottom: 0;
    justify-content: center;
    pointer-events: none; /* Don't block clicks on the input */
    position: absolute;
    right: 0;
    top: 0;
    width: 34px;

    &-lg {
      width: 46px;
    }

    & .rbt-close {
      margin-top: -4px;
      pointer-events: auto; /* Override pointer-events: none; above */
    }
  }

  .has-aux &-input {
    padding-right: 34px;
  }

  &-highlight-text {
    background-color: inherit;
    color: inherit;
    font-weight: bold;
    padding: 0;
  }
}

/* Input Groups */
.input-group > .rbt {
  flex: 1;

  // Form-controls within input-groups have a higher z-index.
  & .rbt-input-hint,
  & .rbt-aux {
    z-index: 5;
  }

  &:not(:first-child) .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  &:not(:last-child) .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

/* Validation States */
.has-error .rbt-input-multi.focus {
  border-color: #843534;
  box-shadow: $inset, 0 0 6px #ce8483;
}

.has-warning .rbt-input-multi.focus {
  border-color: #66512c;
  box-shadow: $inset, 0 0 6px #c0a16b;
}

.has-success .rbt-input-multi.focus {
  border-color: #2b542c;
  box-shadow: $inset, 0 0 6px #67b168;
}

@keyframes loader-animation {
  to {
    transform: rotate(1turn);
  }
}