.multi-input {

  label {

    display: block;
    padding-bottom: 0.2em;

  }

  .error {

    color: $oa-red;

  }

  input {

    background: transparent;

  }

  .react-tagsinput {
    
    background-color: $oa-white;
    border: 1px solid $oa-gray-light;
    border-radius: 4px;
    overflow: hidden;
    padding-left: 3px;
    padding-top: 3px;

    input {
      border: none;
      outline: none;
      min-height: 24px;
      margin-bottom: 6px;
    }

    .react-tagsinput-tag {
      cursor: pointer;
      margin-right: 3px;
      padding: 3px;

      strong {
        margin-left: 4px;
      }

      span, i {

        color: $oa-white; /* required for legacy event form */

      }

      a:hover {

        text-decoration: none;

      }

      a::before {
        color: $oa-white;
        content: " x";
      }

      button {
        background-color: transparent;
        border: 0;
        font-weight: bold;
      }

      i {
        padding: 0 0.2em;
      }

      background-color: $oa-blue;
      border-radius: 2px;
      border: 1px solid $oa-blue;
      color: $oa-white;
      display: inline-block;
      font-family: sans-serif;
      font-size: 13px;
      font-weight: 400;
      margin-bottom: 3px;

      &.error {
      
        background-color: transparent;
        border: 1px solid $oa-red;
        color: $oa-red;

        span, i {

          color: $oa-red; /* required for legacy event form */

        }

        a::before {

          color: $oa-red;

        }

      }

      &:hover {
        background-color: $oa-white;
        border-color: $oa-red;
        color: $oa-red;
        span, i, a::before, button {
          color: $oa-red;
        }
        &.error {
          color: $oa-white;
          background-color: $oa-red;
          span, i, a::before, button {
            color: $oa-white;
          }
        }
      }

    }

    .react-tagsinput-remove {

      cursor: pointer;
      font-weight: bold;

    }

  }

}

.disabled .multi-input,
.disabled.multi-input {

  label, .info {

    color: $oa-gray-light;

  }

  .react-tagsinput {

    cursor: not-allowed;
    background-color: $oa-gray-lighter;

  }
  
  .react-tagsinput-tag {

    border: 1px solid $oa-gray-light;
    background-color: transparent;

    span, i, a:before {

      color: $oa-gray-light;

    }

    &.error {

      i, span, a, a:before {
        color: $oa-gray-light;
      }
      
      border: 1px solid $oa-gray-light;

    }

  }

}