@import '../variables/default.scss';
@import '../mixins/index.scss';

$ink-tag-padding: $ink-spacing-xs !default;
$ink-tag-font-size: $ink-font-size-md !default;
$ink-tag-line-height: $ink-line-height-md !default;
$ink-tag-color: $ink-color-white !default;
$ink-tag-border-radius: $ink-border-radius-md !default;
$ink-tag-font-size-sm: $ink-font-size-sm !default;
$ink-tag-line-height-sm: $ink-line-height-sm !default;
$ink-tag-font-size-lg: $ink-font-size-lg !default;
$ink-tag-line-height-lg: $ink-line-height-lg !default;

.ink-tag {
  display: inline-flex;
  align-items: center;
  font-size: $ink-tag-font-size;
  line-height: $ink-tag-line-height;
  border-radius: $ink-tag-border-radius;
  color: $ink-tag-color;
  padding: 0 $ink-tag-padding;
  white-space: nowrap;

  &--large {
    font-size: $ink-tag-font-size-lg;
    line-height: $ink-tag-line-height-lg;
  }

  &--small {
    font-size: $ink-tag-font-size-sm;
    line-height: $ink-tag-line-height-sm;
  }

  &--primary {
    background-color: $ink-color-brand;
  }

  &--info {
    background-color: $ink-color-info;
  }

  &--danger {
    background-color: $ink-color-error;
  }

  &--warning {
    background-color: $ink-color-warning;
  }

  &--round {
    /* prettier-ignore */
    border-radius: 999PX;
  }
}