@import '../../style/themes/index';
@import '../../style/mixins/index';

@tag-prefix-cls: ~'@{yee-prefix}-tag';

.@{tag-prefix-cls} {
  .yee-reset-component;

  display: inline-block;
  height: auto;
  margin-right: 8px;
  padding: 0 7px;
  font-size: @yee-tag-font-size;
  line-height: 20px;
  white-space: nowrap;
  background: @yee-tag-default-bg;
  border: @yee-border-width-base @yee-border-style-base @yee-border-color-base;
  border-radius: @yee-border-radius-base;
  cursor: default;
  opacity: 1;
  transition: all 0.3s @yee-ease-in-out-circ;

  &:hover {
    opacity: 0.85;
  }

  &,
  a,
  a:hover {
    color: @yee-tag-default-color;
  }

  > a:first-child:last-child {
    display: inline-block;
    margin: 0 -8px;
    padding: 0 8px;
  }

  .@{yee-iconfont-css-prefix}-close {
    .yee-iconfont-size-under-12px(10px);

    margin-left: 3px;
    color: @yee-text-color-secondary;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s @yee-ease-in-out-circ;

    &:hover {
      color: @yee-heading-color;
    }
  }

  &-has-color {
    border-color: transparent;
    &,
    a,
    a:hover,
    .@{yee-iconfont-css-prefix}-close,
    .@{yee-iconfont-css-prefix}-close:hover {
      color: @yee-text-color-inverse;
    }
  }

  &-checkable {
    background-color: transparent;
    border-color: transparent;
    &:not(&-checked):hover {
      color: @yee-primary-color;
    }
    &:active,
    &-checked {
      color: @yee-text-color-inverse;
    }
    &-checked {
      background-color: @yee-primary-6;
    }
    &:active {
      background-color: @yee-primary-7;
    }
  }

  &-hidden {
    display: none;
  }

  // mixin to iterate over colors and create CSS class for each one
  .yee-make-color-classes(@i: length(@yee-preset-colors)) when (@i > 0) {
    .yee-make-color-classes(@i - 1);
    @yee-color: extract(@yee-preset-colors, @i);
    @yee-lightColor: '@{yee-color}-1';
    @yee-lightBorderColor: '@{yee-color}-3';
    @yee-darkColor: '@{yee-color}-6';
    &-@{yee-color} {
      color: @yee-darkColor;
      background: @yee-lightColor;
      border-color: @yee-lightBorderColor;
    }
    &-@{yee-color}-inverse {
      color: @yee-text-color-inverse;
      background: @yee-darkColor;
      border-color: @yee-darkColor;
    }
  }

  .yee-make-color-classes();
}
