@import "./var";

.#{$prefix}tag-group {
  display: inline-block;
  font-size: 0;
  line-height: normal;
  vertical-align: 6px;
  margin-top: -$tag-margin-top;
}

.#{$prefix}tag {
  display: inline-block;
  position: relative;
  background-color: $tag-default-color-bg;
  color: $tag-default-color-text;
  margin: $tag-margin;
  padding: $tag-padding;
  height: auto;
  line-height: $tag-line-height;
  font-size: 0;
  vertical-align: middle;
  border: 1px solid $tag-default-color-bg;
  border-radius: $tag-border-radius;
  white-space: nowrap;
  word-wrap: break-word;
  word-break: break-word;

  span {
    display: inline-block;
    font-size: $tag-font-size;
    vertical-align: top;
    white-space: nowrap;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    word-break: break-word;
  }

  .#{$prefix}icon-dismiss {
    display: none;
    position: absolute;
    right: $tag-icon-dismiss-right;
    bottom: 1px;

    &:hover {
      cursor: pointer;
    }
  }

  .#{$prefix}icon-not,
  .#{$prefix}icon-and {
    margin-right: 2px;
    cursor: pointer;
  }

  &--edit {
    padding: $tag-edit-padding;
    white-space: normal;

    span {
      display: inline;
      white-space: normal;
    }

    .#{$prefix}icon-dismiss {
      display: inline-block;
    }

  }
}

// ie11和edge下，连续字符无法换行，因此单独hack
*::-ms-backdrop, .#{$prefix}tag span {
  word-break: break-all;
}

@supports (-ms-ime-align:auto) {
  .#{$prefix}tag span {
    word-break: break-all;
  }
}

.#{$prefix}form--tag {
  display: inline-block;
  width: 100%;

  .#{$prefix}tag-group {
    margin-top: 0;
  }
}

.#{$prefix}tag-input {
  width: 100%;
  min-height: $form-height;
  background-color: $tag-input-color-bg;
  text-align: left;
  position: relative;

  &__inner {
    padding: 0 4px;
    border: 1px solid $tag-input-color-border;
    border-radius: $tag-border-radius;
    font-size: 0;
    min-height: $form-height;
    box-sizing: border-box;
    cursor: text;
  }

  & .#{$prefix}tag-group {
    // padding-top: ($form-height - 20 - 2)/2 - 4;
    padding-bottom: ($form-height - 20 - 2)/2;
    margin-top: 0;
  }

  & .#{$prefix}input--tag {
    height: 20px;
    line-height: 20px;
    padding: 0 5px 0 0;

  }

  &.is-active {
    height: auto;
    z-index: 1;
    overflow: visible;

    .#{$prefix}tag-input__inner {
      border-color: $tag-input-color-border-active;
      // position: absolute;
      // left:0;
      // right:0;
      // top:0;
      height: auto;
      background-color: $tag-input-color-bg;
      width: 100%;

    }
  }

  &.is-disabled {
    background-color: $color-bg-disabled;
    cursor: not-allowed;

    .#{$prefix}input {
      @include form-control-disabled();
    }

    .#{$prefix}tag-input__inner {
      cursor: inherit;
    }

    .#{$prefix}tag {
      opacity: 0.8;
      color: $color-text-disabled;

      .#{$prefix}icon-dismiss {
        cursor: inherit;
      }
    }
  }
}

.#{$prefix}form__controls {
  .#{$prefix}tag-input {
    display: inline-block;
  }

  &.is-error {
    .#{$prefix}tag-input__inner {
      border-color: $color-error;
    }
  }
}

.#{$prefix}tag.is-blue {
  background-color: $tag-primary-color-bg;
  border-color: $tag-primary-color-border;
  color: $tag-primary-color-text;
}

.#{$prefix}tag.is-blue-dark {
  background-color: $tag-primary-dark-color-bg;
  border-color: $tag-primary-dark-color-border;
  color: $tag-primary-dark-color-text;
}

.#{$prefix}tag.is-warning {
  background-color: $tag-warning-color-bg;
  border-color: $tag-warning-color-border;
  color: $tag-warning-color-text;
}

.#{$prefix}tag.is-warning-dark {
  background-color: $tag-warning-dark-color-bg;
  border-color: $tag-warning-dark-color-border;
  color: $tag-warning-dark-color-text;
}

.#{$prefix}tag.is-error {
  // background-color: rgba(229, 69, 69, 0.14);
  background-color: $tag-error-color-bg;
  border-color: $tag-error-color-border;
  color: $tag-error-color-text;
}

.#{$prefix}tag.is-error-dark {
  background-color: $tag-error-dark-color-bg;
  border-color: $tag-error-dark-color-border;
  color: $tag-error-dark-color-text;
}

.#{$prefix}tag.is-success {
  background-color: $tag-success-color-bg;
  border-color: $tag-success-color-border;
  color: $tag-success-color-text;
}

.#{$prefix}tag.is-success-dark {
  background-color: $tag-success-dark-color-bg;
  border-color: $tag-success-dark-color-border;
  color: $tag-success-dark-color-text;
}

.#{$prefix}tag.#{$prefix}tag--spaceless {
  margin: 0;
}

.#{$prefix}tag.#{$prefix}tag--unlimited-width span {
  max-width: initial;
  white-space: normal;
}