/**
 *
 * This file may have been modified by Bytedance Inc. (“Bytedance Inc.'s Modifications”). 
 * All Bytedance Inc.'s Modifications are Copyright (year) Bytedance Inc..  
 * 
 * This source code is licensed under the Apache license.
 * See LICENSE file in the project root for license information.
 *
 */
@import '../../../styles/variables.less';
@import '../../../styles/mixins.less';

@import './variables.less';

.@{ant-prefix}-sp-tag {
  display: inline-flex;
  align-items: center;
  box-sizing: content-box;
  padding: @sp-tag-padding;
  position: relative;
  border-radius: @sp-tag-border-radius;
  color: #fff;
  background-color: @color-primary-brand;
  margin: @sp-tag-wrapper-margin;
  

  &.sp-tag-size-large {
    line-height: @sp-tag-large-line-height - 2px;
  }
  
  &.sp-tag-size-small {
    line-height: @sp-tag-small-line-height - 2px;

    .sp-tag-content {
      transform: scale(.83333);
      transform-origin: center center;
    }

  }

  &.sp-tag-size-default {
    line-height: @sp-tag-line-height - 2px;
  }

  &.sp-tag-border {
    color: @color-primary-brand;
  }

  &.sp-tag-success {

    &.sp-tag-border {
      color: @color-function-success-main;
    }
    background-color: @color-function-success-main;
  }

  &.sp-tag-error {

    &.sp-tag-border {
      color: @color-function-danger-main;
    }
    background-color: @color-function-danger-main;
  }

  &.sp-tag-warn {

    &.sp-tag-border {
      color: @color-function-warning-main;
    }
    background-color: @color-function-warning-main;
  }

  &.sp-tag-custom-border {
    line-height: @font-assets-caption-regular-Lineheight - 2px;
  }

  .font-assets-caption-regular(@sp-tag-font-size, @sp-tag-line-height);

  &.sp-tag-icon {
    padding: @sp-tag-padding-icon;

    span[role='img'] {
      font-size: 10px;
      margin-left: @sp-tag-icon-margin-left;
      margin-right: @sp-tag-icon-margin-right;
    }
  }

  .@{ant-prefix}-sp-icon:first-child {
    margin-right: 2px;
  }

  .sp-tag-close {
    cursor: pointer;
    display: block;
    height: 12px;
    line-height: 1;
    margin-left: 2px;
  }

  .sp-tag-content {
    display: inline-block;
  }

  &.sp-tag-bg::after,
  &.sp-tag-border::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: @sp-tag-border-radius;
    pointer-events: none;
  }

  &.sp-tag-border::before {
    border: 1px solid currentcolor;
    opacity: .1;
    z-index: 1;
  }

  &.sp-tag-bg::after {
    background-color: currentcolor;
    opacity: .04;
  }
}

.@{ant-prefix}-sp-tag.tag-data-entry {
  margin: 2px 4px 2px 0;
  background-color: @color-fill-deepen-4;
  border: 1px solid @color-line-1;
  color: @color-text-icon-0;

  .sp-tag-content {
    margin-right: 4px;
  }
  .@{ant-prefix}-sp-icon {
    color: #c4c4c4;
  }
}

.@{ant-prefix}-sp-tag.tag-data-entry-error {
  margin: 2px 4px 2px 0;
  background-color: @color-function-danger-highlight;
  border: 1px solid @color-function-danger-main;
  color: @color-function-danger-main;

  .sp-tag-content {
    margin-right: 4px;
  }
  .@{ant-prefix}-sp-icon {
    color: @color-function-danger-main;
  }
}

.@{ant-prefix}-tag-status-wrap {
  color: @color-text-icon-0;
  line-height: 20px;
  .@{ant-prefix}-tag-status-dots {
    vertical-align: middle;
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 8px;
    margin-bottom: 2px;

    &-success {
      background-color: @color-function-success-main;
    }

    &-error {
      background-color: @color-function-danger-main;
    }

    &-warn {
      background-color: @color-function-warning-main;
    }

    &-default {
      background-color: @color-primary-brand;
    }

    &-cancel {
      background-color: @color-fill-deepen-1_2;
    }
  }
}

.@{ant-prefix}-tag-list-wrap {

  .rc-overflow {
    display: flex;
    align-items: center;
    line-height: 18px;
  }
  .@{ant-prefix}-tag-list-overflow-rest {
    border: 1px solid @color-line-1;
    border-radius: 2px;
    padding: 0 4px;
    line-height: 16px;
    height: 18px;
    font-size: 12px;
    color: @color-text-icon-1;
    cursor: pointer;
  }
}

.@{ant-prefix}-tag-list-overflow-rest-popover {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: -4px;

  &-item {
    line-height: 12px;
    margin-bottom: 4px;
  }
}