@import '../../scss/functions.scss';
@import '../../scss/variables.scss';

// #variables
$s-tag-border-radius: $s-border-radius-sm !default;
$s-tag-line-height: $s-line-height-xs !default;
$s-tag-color: $s-dark !default;
$s-tag-bg: $s-gray-200 !default;

$s-tag-small-padding: 1px 3px !default;
$s-tag-small-font-size: $s-font-size-sm !default;
$s-tag-medium-padding: 3px 5px !default;
$s-tag-medium-font-size: $s-font-size-sm !default;
$s-tag-large-padding: 4px 8px !default;
$s-tag-large-font-size: $s-font-size !default;

$s-tag-close-margin-left: 3px !default;
// #endvariables

.s-tag {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: $s-tag-line-height;
  border-radius: $s-tag-border-radius;
  border: 1px solid transparent;

  &.s-tag-plain {
    border-color: currentColor;
    background-color: transparent;
  }
}

.s-tag-default {
  color: $s-tag-color;
  background-color: $s-tag-bg;
}

// 默认类型主题色
@each $color, $value in $s-theme-colors {
  .s-tag-#{$color} {
    color: color-contrast($value);
    background-color: $value;

    // 镂空主题色
    &.s-tag-plain {
      color: $value;
    }
  }
}

// 圆角
.s-tag-round {
  border-radius: 9999px;
}

// 标记
.s-tag-mark {
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
}

// 尺寸
.s-tag-small {
  padding: $s-tag-small-padding;
  font-size: $s-tag-small-font-size;
}
.s-tag-medium {
  padding: $s-tag-medium-padding;
  font-size: $s-tag-medium-font-size;
}
.s-tag-large {
  padding: $s-tag-large-padding;
  font-size: $s-tag-large-font-size;
}

// 可关闭的
.s-tag-close {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: $s-tag-close-margin-left;
  cursor: pointer;
}