/*
 * Adapted from jQuery Tags Input Revisited Plugin
 * https://github.com/underovsky/jquery-tagsinput-revisited
 *
 * MIT License
 *
 * Copyright (c) 2017 Krzysztof Rusnarczyk
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

.tagsinput {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  box-sizing: border-box;
  background: var(--bs-body-bg);
  font-family: sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #556270;
  padding: 5px 5px 0 5px;
  border: 1px solid #e6e6e6;
  border-radius: 2px;

  &.focus {
    border-color: #ccc;
  }

  * {
    box-sizing: border-box;
  }

  .tag {
    position: relative;
    display: block;
    max-width: 100%;
    word-wrap: break-word;
    padding: 10px 30px 10px 10px;
    margin: 0 5px 5px 0;
    font-size: inherit;
    @extend .badge;
    @extend .text-bg-secondary;

    .tag-remove {
      position: absolute;
      background: none;
      display: block;
      width: 30px;
      height: 30px;
      top: 0;
      right: 0;
      cursor: pointer;
      text-decoration: none;
      text-align: center;
      line-height: 30px;
      padding: 0;
      border: 0;
      margin-top: 2px;
    }
  }

  div {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;

    input {
      background: transparent;
      display: block;
      width: 100%;
      font-size: 14px;
      line-height: 20px;
      padding: 5px;
      border: 0 none;
      margin: 0 5px 5px 0;

      &.error {
        color: #ff6b6b;
      }

      &::-ms-clear {
        display: none;
      }

      &::-webkit-input-placeholder,
      &:-moz-placeholder,
      &::-moz-placeholder,
      &:-ms-input-placeholder {
        color: #ccc;
        opacity: 1.0;
      }
    }
  }
}
