@import './theme/default';
@import './theme/font';

.zent-tag {
  @include theme-color(color, stroke, 9);
  @include theme-color(border-color, stroke, 9);
  display: inline-block;
  font-size: $font-size-small;
  line-height: 1;
  padding: 2px 4px;
  border-width: 1px;
  border-style: solid;
  box-sizing: border-box;

  &.zent-tag-size-medium {
    font-size: $font-size-normal;
  }

  &.zent-tag-size-large {
    font-size: $font-size-normal;
    line-height: 18px;
  }

  &.zent-tag-rounded {
    border-radius: 2px;
  }

  &.zent-tag-closable {
    .zent-tag-content {
      display: inline-block;
      margin-right: 4px;
    }

    .zent-tag-close-btn {
      cursor: pointer;
      font-size: 12px;
      transform: translate(2px, 0);
    }
  }

  &.zent-tag-style-red {
    @include theme-color(background-color, error, 2);
    @include theme-color(border-color, error, 2);
  }

  &.zent-tag-style-red-outline {
    @include theme-color(border-color, error, 2);
    @include theme-color(color, error, 4);
  }

  &.zent-tag-style-green {
    @include theme-color(background-color, success, 2);
    @include theme-color(border-color, success, 2);
  }

  &.zent-tag-style-green-outline {
    @include theme-color(color, success, 2);
    @include theme-color(border-color, success, 4);
  }

  &.zent-tag-style-yellow {
    @include theme-color(background-color, warn, 2);
    @include theme-color(border-color, warn, 2);
  }

  &.zent-tag-style-yellow-outline {
    @include theme-color(color, warn, 2);
    @include theme-color(border-color, warn, 4);
  }

  &.zent-tag-style-blue {
    @include theme-color(background-color, primary, 4);
    @include theme-color(border-color, primary, 4);
  }

  &.zent-tag-style-blue-outline {
    @include theme-color(color, primary, 4);
    @include theme-color(border-color, primary, 6);
  }

  &.zent-tag-style-grey {
    @include theme-color(color, stroke, 1);
    @include theme-color(border-color, stroke, 7);
    @include theme-color(background-color, stroke, 7);
  }

  &.zent-tag-style-grey-outline {
    @include theme-color(color, stroke, 1);
    @include theme-color(border-color, stroke, 5);
  }

  &.zent-link-tag {
    padding: 0 4px;

    .zent-tag-content {
      display: flex;
      align-items: center;
    }

    .zent-link-tag-right-icon {
      margin-right: -4px;
      font-size: 16px;
      @include theme-color(color, hint, color);
    }

    &:hover {
      cursor: pointer;
      @include theme-color(color, primary, bg);
      @include theme-color(border-color, primary, bg);

      .zent-link-tag-right-icon {
        @include theme-color(color, primary, bg);
      }
    }
  }

  &.zent-select-tag {
    cursor: pointer;

    &.zent-select-tag-selected {
      @include theme-color(color, primary, bg);
      @include theme-color(background-color, default, hover-bg);
      @include theme-color(border-color, default, hover-bg);
    }
  }

  a {
    color: inherit;
  }
}