.o-tag {
  --tag-radius: var(--o-radius_control-xs);
}

.o-tag-normal {
  --tag-color: var(--o-color-info1);
  --tag-bg-color: var(--o-color-control2-light);
  --tag-bd-color: var(--o-color-control2-light);

  --tag-icon-close-color: var(--o-color-info2);
  --tag-icon-close-color-hover: var(--o-color-info1);
  --tag-icon-close-color-active: var(--o-color-info1);

  &.o-tag-outline {
    --tag-bg-color: transparent;
    --tag-bd-color: var(--o-color-control1);

    --tag-icon-close-color: var(--o-color-info2);
    --tag-icon-close-color-hover: var(--o-color-info1);
    --tag-icon-close-color-active: var(--o-color-info1);
  }
}

.o-tag-primary {
  --tag-color: var(--o-color-white);
  --tag-bg-color: var(--o-color-primary1);
  --tag-bd-color: var(--o-color-primary1);

  --tag-icon-close-color: var(--o-color-white);
  --tag-icon-close-color-hover: var(--o-color-white);
  --tag-icon-close-color-active: var(--o-color-white);

  &.o-tag-outline {
    --tag-bg-color: transparent;
    --tag-color: var(--o-color-primary1);

    --tag-icon-close-color: var(--o-color-primary1);
    --tag-icon-close-color-hover: var(--o-color-primary2);
    --tag-icon-close-color-active: var(--o-color-primary3);
  }
}

.o-tag-success {
  --tag-color: var(--o-color-white);
  --tag-bg-color: var(--o-color-success1);
  --tag-bd-color: var(--o-color-success1);

  --tag-icon-close-color: var(--o-color-white);
  --tag-icon-close-color-hover: var(--o-color-white);
  --tag-icon-close-color-active: var(--o-color-white);

  &.o-tag-outline {
    --tag-bg-color: transparent;
    --tag-color: var(--o-color-success1);

    --tag-icon-close-color: var(--o-color-success1);
    --tag-icon-close-color-hover: var(--o-color-success2);
    --tag-icon-close-color-active: var(--o-color-success3);
  }
}

.o-tag-warning {
  --tag-color: var(--o-color-white);
  --tag-bg-color: var(--o-color-warning1);
  --tag-bd-color: var(--o-color-warning1);

  --tag-icon-close-color: var(--o-color-white);
  --tag-icon-close-color-hover: var(--o-color-white);
  --tag-icon-close-color-active: var(--o-color-white);

  &.o-tag-outline {
    --tag-bg-color: transparent;
    --tag-color: var(--o-color-warning1);

    --tag-icon-close-color: var(--o-color-warning1);
    --tag-icon-close-color-hover: var(--o-color-warning2);
    --tag-icon-close-color-active: var(--o-color-warning3);
  }
}

.o-tag-danger {
  --tag-color: var(--o-color-white);
  --tag-bg-color: var(--o-color-danger1);
  --tag-bd-color: var(--o-color-danger1);

  --tag-icon-close-color: var(--o-color-white);
  --tag-icon-close-color-hover: var(--o-color-white);
  --tag-icon-close-color-active: var(--o-color-white);

  &.o-tag-outline {
    --tag-bg-color: transparent;
    --tag-color: var(--o-color-danger1);

    --tag-icon-close-color: var(--o-color-danger1);
    --tag-icon-close-color-hover: var(--o-color-danger2);
    --tag-icon-close-color-active: var(--o-color-danger3);
  }
}

.o-tag-large {
  --tag-padding: 0 11px;
  --tag-text-size: var(--o-font_size-tip2);
  --tag-text-height: var(--o-line_height-tip2);
  --tag-height: var(--o-control_size-s);
  --tag-icon-size: var(--o-icon_size_control-xs);
  --tag-icon-gap: 4px;
}

.o-tag-medium {
  --tag-padding: 0 7px;
  --tag-text-size: var(--o-font_size-tip2);
  --tag-text-height: var(--o-line_height-tip2);
  --tag-height: 20px;
  --tag-icon-size: var(--o-icon_size_control-xs);
  --tag-icon-gap: 4px;
}

.o-tag-small {
  --tag-padding: 0 5px;
  --tag-text-size: var(--o-font_size-tip2);
  --tag-text-height: var(--o-line_height-tip2);
  --tag-height: var(--o-control_size-xs);
  --tag-icon-size: var(--o-icon_size_control-xs);
  --tag-icon-gap: 2px;
}

.o-tag-round-pill {
  --tag-radius: var(--o-control_size-l);
}