@import 'src/assets/sass/main/mixins';
.vc-tag-input {
  &__wrap {
    @apply w-full;
  }
  @include labelCustomInput;
  @include errorContainer;

  &__prefix-icon {
    @apply flex-shrink-0 flex items-center justify-center px-1;
    .vc-tag-input-icon-color--active {
      @apply text-active-elements;
    }
    .vc-tag-input-icon-color--primary {
      @apply text-primary-actions;
    }
    .vc-tag-input-icon-color--secondary {
      @apply text-secondary-actions;
    }
    .vc-tag-input-icon-color--destructive {
      @apply text-destructive-actions;
    }
  }
  &__clearable {
    @apply flex-shrink-0 flex items-center justify-center px-1;
    i {
      @apply cursor-pointer;
      transition: all 0.3s ease;
      &:hover {
        @apply text-icons;
      }
    }
  }
  &__container {
    @apply min-h-8 pl-3 pr-3 w-full max-w-full flex items-center text-sm rounded border border-field-borders outline-none overflow-hidden;
    &.is-clearable {
      @apply pr-0;
    }
    &.is-prefix-icon {
      @apply pl-0;
    }
    &:hover:not(.is-disabled) {
      @apply shadow-focus-outer;
    }
    &.vc-tag-input-color--active {
      &:hover:not(.is-disabled) {
        @apply shadow-focus-outer;
      }
      &:focus:not(.is-disabled):not(.is-error) {
        @apply border-active-elements--focus;
      }
    }
    &.vc-tag-input-color--primary {
      &:hover:not(.is-disabled) {
        @apply shadow-focus-outer-primary;
      }
      &:focus:not(.is-disabled):not(.is-error) {
        @apply border-primary-actions--focus;
      }
    }
    &.vc-tag-input-color--secondary {
      &:hover:not(.is-disabled) {
        @apply shadow-focus-outer-secondary;
      }
    }
    &.vc-tag-input-color--destructive {
      &:hover:not(.is-disabled) {
        @apply shadow-focus-outer-destructive;
      }
    }
  }
  &__tags {
    .vc-tag-input__tag-item {
      @apply mr-1;
    }
  }
  &__wrap {
    &--focus:not(&--disabled):not(&--error) {
      .vc-tag-input__container {
        @apply border-primary-actions--focus;
        &.vc-tag-input-color--active {
          &:not(.is-error) {
            @apply border-active-elements--focus;
          }
        }
        &.vc-tag-input-color--primary {
          &:not(.is-error) {
            @apply border-primary-actions--focus;
          }
        }
        &.vc-tag-input-color--secondary {
          &:not(.is-error) {
            @apply border-secondary-actions--focus;
          }
        }
        &.vc-tag-input-color--destructive {
          &:not(.is-error) {
            @apply border-destructive-actions--focus;
          }
        }
      }
    }
    &--error {
      .vc-tag-input__container {
        @apply border-error;
      }
    }
    &--disabled {
      .vc-tag-input__container, input {
        @apply bg-default-bg;
        &:hover {
          @apply cursor-not-allowed shadow-none;
        }
      }
    }
  }
  &__content {
    @apply flex-grow flex-wrap;
    max-width: calc(100% - 32px);
    overflow: hidden;
  }
  &__input-token {
    flex: 1 1 1rem;
    display: inline-flex;
  }
  &__input {
    border: 0 none;
    outline: 0 none;
    background-color: transparent;
    margin: 0;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
    width: 100%;
  }
}
[dir='rtl'] {
  .vc-tag-input {
    &__container {
      @apply pl-3 pr-3;
      &.is-clearable {
        @apply pl-0;
      }
      &.is-prefix-icon {
        @apply pr-0;
      }
    }
    &__tags {
      .vc-tag-input__tag-item {
        @apply mr-0 ml-1;
      }
    }
  }
}
