@use '../../../style/color/index.scss' as *;
@use '../../../style/utils/tag/index.scss' as *;

.ver-tag {
  color: $ver-zinc-1;
  background-color: $ver-violet-6;
  border-color: $ver-violet-5;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  height: 24px;
  padding: 0 9px;
  border-width: 1px;
  line-height: 1;
  font-size: 12px;
  box-sizing: border-box;
  border-style: solid;
  border-radius: 4px;
}
/* round */
.ver-tag.is-round {
  border-radius: 50px;
}

.ver-tag.is-plain {
  color: $ver-violet-5;
  border-color: $ver-violet-6;
  background-color: transparent;
}

/* type */
@include ver-tag-type('primary', $ver-violet-6, $ver-violet-5);
@include ver-tag-type('success', $ver-green-6, $ver-green-5);
@include ver-tag-type('info', $ver-zinc-6, $ver-zinc-5);
@include ver-tag-type('warning', $ver-orange-6, $ver-orange-5);
@include ver-tag-type('error', $ver-red-6, $ver-red-5);

/* Plain */
@include ver-tag-type-plain('primary', $ver-violet-5);
@include ver-tag-type-plain('success', $ver-green-5);
@include ver-tag-type-plain('info', $ver-zinc-5);
@include ver-tag-type-plain('warning', $ver-orange-5);
@include ver-tag-type-plain('error', $ver-red-5);

/* size属性 */
.ver-tag.is-xs {
  font-size: 6px;
  height: 10px;
  padding: 0px 7px;
}

.ver-tag.is-sm {
  font-size: 10px;
  height: 20px;
  padding: 0px 7px;
}

.ver-tag.is-lg {
  font-size: 16px;
  height: 32px;
  padding: 0px 11px;
}
