/**
 * Tag
 */
@import '../variables/index.scss';

@mixin tag-style($text-color, $border-color, $background-color) {
  color: $text-color;
  border-color: $border-color;
  background-color: $background-color;
}

.at-tag {
  display: inline-block;
  padding: 1px 8px;
  color: $color-white;
  font-size: 0;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  border: 1px solid $tag-border-color;
  border-radius: $border-radius-base;
  background-color: $tag-bg-color;
  outline: 0;
  @include tag-style($text-color, $tag-border-color, $tag-bg-color);

  &__text {
    font-size: $font-size-smer;
  }
  &__close {
    font-size: 10px;
    padding-left: 4px;
    margin: 0;
    cursor: pointer;

    &:hover {
      color: tint($text-color, 30%);
    }
  }
  &--default {
    @include tag-style($text-color, $tag-border-color, $tag-bg-color);
  }
  &--primary {
    @include tag-style($color-white, $btn-primary-bg, $btn-primary-bg);
  }
  &--success {
    @include tag-style($color-white, $btn-success-bg, $btn-success-bg);
  }
  &--error {
    @include tag-style($color-white, $btn-error-bg, $btn-error-bg);
  }
  &--warning {
    @include tag-style($color-white, $btn-warning-bg, $btn-warning-bg);
  }
  &--info {
    @include tag-style($color-white, $btn-info-bg, $btn-info-bg);
  }
}