@import './theme/index.less';
@import './mixins/config.less';

@tag-prefix-name: ~'@{namespace}-tag';
@tag-big-name: ~'@{namespace}-tag@{modifier-separator}big';
@tag-small-name: ~'@{namespace}-tag@{modifier-separator}small';
@tag-success-name: ~'@{namespace}-tag@{modifier-separator}success';
@tag-info-name: ~'@{namespace}-tag@{modifier-separator}info';
@tag-warning-name: ~'@{namespace}-tag@{modifier-separator}warning';
@tag-danger-name: ~'@{namespace}-tag@{modifier-separator}danger';
@tag-dark-name: ~'@{namespace}-tag@{modifier-separator}dark';
@tag-dot-name: ~'@{tag-prefix-name}-dot';
@tag-dot-success-name: ~'@{tag-dot-name}@{modifier-separator}success';
@tag-dot-warning-name: ~'@{tag-dot-name}@{modifier-separator}warning';
@tag-dot-danger-name: ~'@{tag-dot-name}@{modifier-separator}danger';
@tag-dot-info-name: ~'@{tag-dot-name}@{modifier-separator}info';
@tag-dot-black-name: ~'@{tag-dot-name}@{modifier-separator}black';
@tag-dot-dark-name: ~'@{tag-dot-name}@{modifier-separator}dark';

.@{tag-prefix-name} {
  padding: @tag-padding-normal;
  border-radius: @tag-border-radius;
  font-size: 12px;
  line-height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: @font-bold;
  cursor: default;
  text-transform: uppercase;

  .setBgAndColor(@tag-bg-color-default, @tag-font-color-default);

  &.@{tag-success-name} {
    .setBgAndColor(@tag-bg-color-success, @tag-font-color-success)
  }

  &.@{tag-info-name} {
    .setBgAndColor(@tag-bg-color-info, @tag-font-color-info)
  }

  &.@{tag-warning-name} {
    .setBgAndColor(@tag-bg-color-warning, @tag-font-color-warning)
  }

  &.@{tag-danger-name} {
    .setBgAndColor(@tag-bg-color-danger, @tag-font-color-danger)
  }

  &.@{tag-big-name} {
    padding: @tag-padding-normal @tag-padding-big;
  }

  &.@{tag-small-name} {
    padding: @padding-smallest @padding-smaller;
  }

  &.@{tag-dark-name} {
    color: @white;
    background-color: @tag-bg-color-dark-default;
  
    &.@{tag-success-name} {
      background-color: @tag-bg-color-dark-success;
    }
    
    &.@{tag-info-name} {
      background-color: @tag-bg-color-dark-info;
    }
    
    &.@{tag-warning-name} {
      background-color: @tag-bg-color-dark-warning;
    }
    
    &.@{tag-danger-name} {
      background-color:@tag-bg-color-dark-danger;
    }
  }

  &.is-rectangle {
    border-radius: @tag-border-radius-rectangle;
  }

  .@{tag-dot-name} {
    width: 8px;
    height: 8px;
    border-radius: 100%;
    margin-right: 4px;

    &.@{tag-dot-success-name} {
      background-color: @green-0;
    }
    &.@{tag-dot-warning-name} {
      background-color: @tag-color-dark-warning;
    }
    &.@{tag-dot-danger-name} {
      background-color: @red-1;
    }
    &.@{tag-dot-info-name} {
      background-color: @black-3;
    }
    &.@{tag-dot-black-name} {
      background-color: @black-1;
    }
    &.@{tag-dot-dark-name} {
      background-color: @black-0;
    }
  }
}

.setBgAndColor (@background, @color) {
  background-color: @background;
  color: @color;
}