@import '../../mixins/box-sizing';

// This component does not have dark version so all css is in this file

:host {
  // Variables
  --tds-badge-background-color: var(--tds-red-400);
  --tds-badge-color-text: var(--tds-white);

  // Styling
  @include tds-box-sizing;

  display: block;
}

.tds-badge {
  display: block;
  border-radius: 12px;
  background-color: var(--tds-badge-background-color);
  text-align: center;

  &.tds-badge-sm {
    height: 8px;
    width: 8px;
    line-height: 8px;
  }

  &.tds-badge-lg {
    height: 20px;
    line-height: 20px;
    width: 20px;
  }

  &.tds-badge-pill {
    display: inline-block;
    width: unset;
    padding-left: 8px;
    padding-right: 8px;
  }

  &.tds-badge-hidden {
    display: none;
  }
}

.tds-badge-text {
  font-size: 12px;
  color: var(--tds-badge-color-text);
  font-weight: bold;
}