@import "../lib.less";

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

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

    height: @@height;
    border-radius: @@radius;
    font-size: @@font-size;
    line-height: dls-sum(@@height, -2px);
  }

  &[ui~="s"] {
    .make-metrics(s);
  }

  &:not([ui~="bordered"]) {
    border-color: transparent !important;
  }

  &-remove {
    margin-left: @dls-tag-content-spacing;
    font-size: inherit;

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

  &.focus-visible {
    .dls-focus-ring(@dls-border-color-focus, @dls-shadow-focus);
  }

  &-default {
    .apply-color(@dls-tag-color);

    &.@{veui-prefix}-tag-selected {
      .apply-flip-color(selected, @dls-tag-color);
    }

    &[ui~="reverse"] {
      .apply-flip-color(reverse, @dls-tag-color);
    }
  }

  .make-status-color(@status) {
    &-@{status} {
      @color-name: ~"dls-tag-color-@{status}";
      @color: @@color-name;

      .apply-color(@color);

      &.@{veui-prefix}-tag-selected {
        .apply-flip-color(selected, @color);
      }

      &[ui~="reverse"] {
        .apply-flip-color(reverse, @color);
      }
    }
  }

  .make-status-color(info);
  .make-status-color(success);
  .make-status-color(warning);
  .make-status-color(error);

  &-selectable {
    cursor: pointer;
  }

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

  .apply-color(@color) {
    border: 1px solid fade(@color, percentage(@dls-tag-border-opacity));
    color: @color;
    background-color: fade(@color, percentage(@dls-tag-background-opacity));

    &.@{veui-prefix}-tag-selectable:not(.@{veui-prefix}-disabled) {
      &:hover {
        background-color: fade(
          @color,
          percentage(@dls-tag-background-opacity-hover)
        );
      }

      &:active {
        background-color: fade(
          @color,
          percentage(@dls-tag-background-opacity-active)
        );
      }
    }

    &.@{veui-prefix}-disabled {
      border-color: fade(@color, percentage(@dls-tag-border-opacity-disabled));
      background-color: fade(
        @color,
        percentage(@dls-tag-background-opacity-disabled)
      );
      color: fade(@color, percentage(@dls-tag-font-opacity-disabled));
    }
  }

  .apply-flip-color(@name, @color) {
    @flip-color: ~"dls-tag-font-color-@{name}";
    @flip-color-hover: ~"dls-tag-font-color-@{name}";
    @flip-bg-op: ~"dls-tag-background-opacity-@{name}";
    @flip-bg-op-hover: ~"dls-tag-background-opacity-@{name}-hover";
    @flip-bg-op-active: ~"dls-tag-background-opacity-@{name}-active";
    @flip-bg-op-disabled: ~"dls-tag-background-opacity-@{name}-disabled";
    @flip-font-op-disabled: ~"dls-tag-font-opacity-@{name}-disabled";

    border: 1px solid transparent;
    color: @@flip-color;
    background-color: fade(@color, percentage(@@flip-bg-op));

    &.@{veui-prefix}-tag-selectable:not(.@{veui-prefix}-disabled) {
      &:hover {
        background-color: fade(@color, percentage(@@flip-bg-op-hover));
      }

      &:active {
        background-color: fade(@color, percentage(@@flip-bg-op-active));
      }
    }

    &.@{veui-prefix}-disabled {
      background-color: fade(@color, percentage(@@flip-bg-op-disabled));
      color: fade(@@flip-color, percentage(@@flip-font-op-disabled));
    }
  }
}