@import "../lib.less";
@import "../variables/components/tag.less";

.@{veui-prefix}-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  .make-metrics(m);
  .padding(0, @veui-tag-padding);
  border: 1px solid @veui-tag-border-color;
  color: @veui-tag-font-color;
  background-color: @veui-tag-background-color;
  white-space: nowrap;
  outline: none;
  line-height: 1;
  .veui-transition(color, border-color, background-color, box-shadow, opacity);

  .make-metrics(@size) {
    @height: ~"veui-tag-height-@{size}";
    @font-size: ~"veui-tag-font-size-@{size}";

    height: @@height;
    border-radius: @veui-border-radius-s;
    font-size: @@font-size;
    &[ui~="ellipse"] {
        border-radius: @@height;
    }
    &[ui~="circle"] {
        width: @@height;
        border-radius: 50%;
        overflow: hidden;
        justify-content: center;
        padding: 0;
    }
  }
  &[ui~="xs"] {
    .make-metrics(xs);
  }
  &[ui~="s"] {
    .make-metrics(s);
  }
  &[ui~="m"] {
    .make-metrics(m);
  }
  &[ui~="l"] {
    .make-metrics(l);
  }

  &[ui~="borderless"]:not([data-focus-visible-added]) {
    border-color: transparent;
  }

  &[ui~="simple"] {
    background-color: @veui-tag-background-color-simple;
  }

  &-remove.@{veui-prefix}-button {
    margin-left: @veui-tag-content-spacing;
    padding: 0 @veui-tag-content-spacing * .5;
    font-size: inherit;

    &:hover {
      color: @veui-tag-font-color-remove-hover;
    }

    &:active {
      color: @veui-tag-font-color-remove-active;
    }

    &[data-focus-visible-added] {
      color: @veui-tag-font-color-remove-focus;
    }

    .@{veui-prefix}-icon {
      .veui-icon-size(@veui-tag-icon-size-aux);
    }
  }

  &[data-focus-visible-added] {
    .veui-focus-ring(@veui-tag-border-color-focus, @veui-tag-shadow-focus);
  }

  &:active {
    outline: none;
  }

  &-selectable {
    cursor: pointer;
  }
  

  &.@{veui-prefix}-disabled {
    color: @veui-tag-font-color-disabled;
    outline: none;

    .@{veui-prefix}-tag-remove {
      cursor: not-allowed;
    }
  }

  &.@{veui-prefix}-tag-selected {
    color: @veui-tag-font-color-selected;
    border-color: @veui-tag-border-color-selected;
    background-color: @veui-tag-background-color-selected;

    &[data-focus-visible-added] {
      .veui-focus-ring(
        @veui-tag-border-color-selected-focus,
        @veui-tag-shadow-selected-focus
      );
    }

    &.@{veui-prefix}-disabled {
      border-color: @veui-tag-border-color-selected-disabled;
      background-color: @veui-tag-background-color-selected-disabled;
    }
  }
  &-default {
    &.@{veui-prefix}-disabled {
        border-color: @veui-tag-border-color-disabled;
        background-color: @veui-tag-background-color-disabled;
    }
    &.@{veui-prefix}-tag-selectable {
      &[ui~="simple"] {
        &:hover:not(.@{veui-prefix}-disabled) {
          color: @veui-tag-font-color-simple-hover;
          background-color: @veui-tag-background-color-simple;
          border-color: @veui-tag-border-color-simple-hover;
        }
        &:active:not(.@{veui-prefix}-disabled) {
          background: #DBE4FF;
        }
        &[data-focus-visible-added]:not(.@{veui-prefix}-tag-selected) {
          color: @veui-tag-font-color-simple-hover;
        }
        &.@{veui-prefix}-tag-selected:not([data-focus-visible-added]) {
          color: @veui-tag-font-color-simple-hover;
          background-color: @veui-tag-background-color-simple-selected;
          border-color: @veui-tag-border-color-simple-hover;
        }
        &[ui~="borderless"]:not([data-focus-visible-added]) {
          border-color: transparent;
        }
      }
      &:hover:not(.@{veui-prefix}-disabled) {
        color: @veui-tag-font-color-hover;
        background-color: @veui-tag-background-color-hover;
      }
      &:active:not(.@{veui-prefix}-disabled) {
        background-color: @veui-color-gray-5;
      }
      &.@{veui-prefix}-tag-selected {
        &:hover:not(.@{veui-prefix}-disabled) {
          color: @veui-tag-font-color-selected;
          background-color: @veui-tag-background-color-selected-hover;
        }
        &:active:not(.@{veui-prefix}-disabled) {
          color: @veui-tag-font-color-selected;
          background-color: @veui-tag-background-color-selected-active;
        }
      }
    }
  }

  .make-state-color (@state) {
    &-@{state} {
      @color-name: ~"veui-tag-font-color-@{state}";
      @bd-color-name: ~"veui-tag-border-color-@{state}";
      @bg-color-name: ~"veui-tag-background-color-@{state}";
      @disabled-color-name: ~"veui-tag-font-color-@{state}-disabled";
      @disabled-bd-color-name: ~"veui-tag-border-color-@{state}-disabled";

      @selected-bg-color-name: ~"veui-tag-background-color-@{state}-reversed";
      @selected-disabled-bg-color: ~"veui-tag-background-color-@{state}-reversed-disabled";

      color: @@color-name;
      border-color: @@bd-color-name;
      background-color: @@bg-color-name;

      &.@{veui-prefix}-disabled {
        color: @@disabled-color-name;
        border-color: @@disabled-bd-color-name;
      }

      &.@{veui-prefix}-tag-selected,
      &[ui~="reverse"] {
        color: @veui-tag-font-color-selected;
        border-color: @veui-tag-border-color-selected;
        background-color: @@selected-bg-color-name;

        &[data-focus-visible-added] {
          .veui-focus-ring(
            @veui-tag-border-color-selected-focus,
            @veui-tag-shadow-selected-focus
          );
        }

        &.@{veui-prefix}-disabled {
          border-color: @veui-tag-border-color-selected-disabled;
          background-color: @@selected-disabled-bg-color;
        }
      }

      &[ui~="reverse"] {
        color: @veui-tag-font-color-reversed;
      }

      &[data-focus-visible-added],
      &.@{veui-prefix}-tag[data-focus-visible-added] {
        .veui-focus-ring(@veui-tag-border-color-focus, @veui-tag-shadow-focus);
      }
    }
  }

  .make-state-color(info);
  .make-state-color(success);
  .make-state-color(warning);
  .make-state-color(error);
}