@use 'mixins/mixins' as *;
@use 'mixins/function' as *;
@use 'mixins/config' as *;

@include b(input-tag) {
  width: fit-content;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background-color: getCssVar('fill-color-blank');
  box-sizing: border-box;
  border-radius: getCssVar('border-radius-base');
  border: 1px solid getCssVar('border-color');
  padding: 1px 2px;

  &:hover {
    border-color: getCssVar('border-color-hover');
  }
  &.is-focus {
    border-color: getCssVar('color-primary');
  }

  &.is-disabled {
    background-color: getCssVar('disabled-bg-color');
    cursor: not-allowed;

    &:hover {
      border-color: getCssVar('border-color');
    }

    .#{$el-namespace + -tag__close} {
      cursor: not-allowed;

      &:hover {
        background-color: transparent;
        color: getCssVar('tag-hover-color');
      }
    }
  }

  @include e(tag) {
    margin-right: 4px;
    margin-top: 1px;
    margin-bottom: 1px;
  }

  @include e(input) {
    flex: 1;
    min-width: 85px;
    box-sizing: border-box;
    padding: 0;

    @include elb(input__wrapper) {
      box-sizing: border-box;
      box-shadow: none;
      padding: 0 4px;
    }
    @include elb(input__inner) {
      line-height: 24px;
      height: 24px;
    }
  }

  @include elb(input) {
    &.is-disabled {
      @include elb(input__wrapper) {
        box-shadow: none;
      }
    }
  }
}

@include elb(form-item) {
  &.is-error {
    .#{$plus-namespace + -input-tag} {
      border-color: getCssVar('color-danger');

      .#{$el-namespace + -input__wrapper } {
        box-shadow: none;

        &.is-focus {
          box-shadow: none !important;
        }
        &:hover {
          box-shadow: none;
        }
      }
    }
  }
}