.@{css-prefix}tag {
  display: inline-block;
  font-size: @font-size-md;
  line-height: @line-height-md;
  padding: @tag-padding-base-vertical @tag-padding-base-horizontal;
  border-radius: @border-radius-base;
  border-width: 1px;
  border-style: solid;
  position: relative;
  background-clip: padding-box;
  &-default {
    .tag-color(@tag-default-bg; @tag-default-border; @tag-default-color; @tag-default-close-fill);
    &:hover {
      .tag-color(@tag-default-hover-bg; @tag-default-hover-border; @tag-default-hover-color; @tag-default-hover-close-fill);
    }
  }
  &-light {
    .tag-color(@tag-light-bg; @tag-light-border; @tag-light-color; @tag-light-close-fill);
    &:hover {
      .tag-color(@tag-light-hover-bg; @tag-light-hover-border; @tag-light-hover-color; @tag-light-hover-close-fill);
    }
  }
  &-info {
    .tag-color(@tag-info-bg; @tag-info-border; @tag-info-color; @tag-info-close-fill);
    &:hover {
      .tag-color(@tag-info-hover-bg; @tag-info-hover-border; @tag-info-hover-color; @tag-info-hover-close-fill);
    }
  }
  &-primary {
    .tag-color(@tag-primary-bg; @tag-primary-border; @tag-primary-color; @tag-primary-close-fill);
    &:hover {
      .tag-color(@tag-primary-hover-bg; @tag-primary-hover-border; @tag-primary-hover-color; @tag-primary-hover-close-fill);
    }
  }
  &-success {
    .tag-color(@tag-success-bg; @tag-success-border; @tag-success-color; @tag-success-close-fill);
    &:hover {
      .tag-color(@tag-success-hover-bg; @tag-success-hover-border; @tag-success-hover-color; @tag-success-hover-close-fill);
    }
  }
  &-warning {
    .tag-color(@tag-warning-bg; @tag-warning-border; @tag-warning-color; @tag-warning-close-fill);
    &:hover {
      .tag-color(@tag-warning-hover-bg; @tag-warning-hover-border; @tag-warning-hover-color; @tag-warning-hover-close-fill);
    }
  }
  &-danger {
    .tag-color(@tag-danger-bg; @tag-danger-border; @tag-danger-color; @tag-danger-close-fill);
    &:hover {
      .tag-color(@tag-danger-hover-bg; @tag-danger-hover-border; @tag-danger-hover-color; @tag-danger-hover-close-fill);
    }
  }
  &-disabled {
    cursor: not-allowed;
    &.@{css-prefix}tag-default {
      .tag-color(@tag-disabled-bg; @tag-disabled-bg; @tag-disabled-color; @tag-default-close-fill);
    }
    &.@{css-prefix}tag-info {
      .tag-color(@info-color-4; @info-color-4; @text-color-white; @text-color-white);
    }
    &.@{css-prefix}tag-primary {
      .tag-color(@primary-color-4; @primary-color-4; @text-color-white; @text-color-white);
    }
    &.@{css-prefix}tag-success {
      .tag-color(@success-color-4; @success-color-4; @text-color-white; @text-color-white);
    }
    &.@{css-prefix}tag-warning {
      .tag-color(@warning-color-4; @warning-color-4; @text-color-white; @text-color-white);
    }
    &.@{css-prefix}tag-danger {
      .tag-color(@danger-color-4; @danger-color-4; @text-color-white; @text-color-white);
    }
    &.@{css-prefix}tag-light {
      .tag-color(@tag-light-disable-bg; @tag-light-disable-border; @tag-light-disable-color; @tag-light-disable-color);
    }
    &.@{css-prefix}tag-closable {
      .bui-tag-close {
        cursor: not-allowed;
      }
    }
  }
  &-sm {
    padding: @tag-padding-sm-vertical @tag-padding-sm-horizontal;
    font-size: @tag-sm-font-size;
    line-height: @tag-sm-line-height;
  }
  &-lg {
    padding: @tag-padding-lg-vertical @tag-padding-lg-horizontal;
  }
  &-xs {
    padding: @tag-padding-xs-vertical @tag-padding-xs-horizontal;
    font-size: @tag-xs-font-size;
    line-height: @tag-xs-line-height;
  }
  &-xl{
    padding: @tag-padding-xl-vertical @tag-padding-xl-horizontal;
    font-size: @tag-padding-xl-font-size;
    line-height: @tag-xl-line-height;
  }
  &-closable {
    padding-right: @tag-closable-padding-right;
    .bui-tag-close {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 8px;
      cursor: pointer;
    }
    &.@{css-prefix}tag-xs {
      padding-right: @tag-xs-closable-padding-right;
      .bui-tag-close{
        right: 3px;
        .size(@tag-xs-close-tag-size, @tag-xs-close-tag-size);
      }
    }
    &.@{css-prefix}tag-xl {
      padding-right: @tag-xl-closable-padding-right;
      .bui-tag-close{
        .size(@tag-xl-close-tag-size, @tag-xl-close-tag-size);
      }
    }
    &.@{css-prefix}tag-sm {
      padding-right: @tag-closable-padding-right;
      .bui-tag-close {
        .size(@tag-sm-close-tag-size, @tag-sm-close-tag-size);
      }
    }
    &.@{css-prefix}tag-md,
    &.@{css-prefix}tag-lg {
      padding-right: @tag-closable-padding-right;
      .bui-tag-close {
        .size(@tag-md-close-tag-size, @tag-md-close-tag-size);
      }
    }
  }
  &-plain {
    &.@{css-prefix}tag-default {
      .tag-color(@tag-plain-default-bg; @tag-plain-default-border; @text-color-1; @tag-default-close-fill);
      &:hover {
        .tag-color(@tag-plain-default-bg; @tag-plain-default-border; @text-color-2; @tag-default-close-fill);
      }
    }
    &.@{css-prefix}tag-info {
      .tag-color(@info-color-6; @info-color-4; @info-color; @info-color);
      &:hover {
        .tag-color(@info-color-6; @info-color-4; @info-color-3; @info-color-3);
      }
    }
    &.@{css-prefix}tag-primary {
      .tag-color(@primary-color-6; @primary-color-4; @primary-color; @primary-color);
      &:hover {
        .tag-color(@primary-color-6; @primary-color-4; @primary-color-3; @primary-color-3);
      }
    }
    &.@{css-prefix}tag-success {
      .tag-color(@success-color-6; @success-color-4; @success-color; @success-color);
      &:hover {
      .tag-color(@success-color-6; @success-color-4; @success-color-3; @success-color-3);
      }
    }
    &.@{css-prefix}tag-warning {
      .tag-color(@warning-color-6; @warning-color-4; @warning-color; @warning-color);
      &:hover {
      .tag-color(@warning-color-6; @warning-color-4; @warning-color-3; @warning-color-3);
      }
    }
    &.@{css-prefix}tag-danger {
      .tag-color(@danger-color-6; @danger-color-4; @danger-color; @danger-color);
      &:hover {
        .tag-color(@danger-color-6; @danger-color-4; @danger-color-3; @danger-color-3);
      }
    }
    &.@{css-prefix}tag-disabled {
      &.@{css-prefix}tag-default {
        .tag-color(@tag-plain-default-disabled-bg; @tag-plain-default-disabled-border; @tag-plain-default-disabled-color; @tag-plain-default-disabled-color);
      }
      &.@{css-prefix}tag-info {
        .tag-color(@tag-plain-info-disable-bg; @tag-plain-info-disable-color; @tag-plain-info-disable-border-color; @tag-plain-info-disable-close-fill);
      }
      &.@{css-prefix}tag-primary {
        .tag-color(@tag-plain-primary-disable-bg; @tag-plain-primary-disable-color; @tag-plain-primary-disable-border-color; @tag-plain-primary-disable-close-fill);
      }
      &.@{css-prefix}tag-success {
        .tag-color(@tag-plain-success-disable-bg; @tag-plain-success-disable-color; @tag-plain-success-disable-border-color; @tag-plain-success-disable-close-fill);
      }
      &.@{css-prefix}tag-warning {
        .tag-color(@tag-plain-warning-disable-bg; @tag-plain-warning-disable-color; @tag-plain-warning-disable-border-color; @tag-plain-warning-disable-close-fill);
      }
      &.@{css-prefix}tag-danger {
        .tag-color(@tag-plain-danger-disable-bg; @tag-plain-danger-disable-color; @tag-plain-danger-disable-border-color; @tag-plain-danger-disable-close-fill);
      }
      &.bui-tag-closable {
        .bui-tag-close {
          cursor: not-allowed;
        }
      }
    }
  }
}
.tag-color(@background; @border; @color; @close-fill) {
  background-color: @background;
  color: @color;
  border-color: @border;
  .bui-tag-close {
    fill: @close-fill;
  }

}

.@{css-prefix}tag-rtl {
  direction: rtl;
  &.@{css-prefix}tag-closable {
    padding-left: @tag-closable-padding-right;
    padding-right: @tag-padding-base-horizontal;
    .bui-tag-close {
      left: 8px;
      right: auto;
    }
  }
}