@import '@teamleader/ui-colors';
@import '@teamleader/ui-utilities';
@import '@teamleader/ui-typography';

:root {
  --border-radius: 4px;
}

.counter {
  background: var(--background-color);
  border-radius: 50%;
  color: var(--color-white);
  display: inline-block;
  font-size: calc(1.4 * var(--unit));
  font-family: var(--font-family-semi-bold);
  font-weight: 600;
  line-height: 1;
  min-height: var(--min-size);
  min-width: var(--min-size);
}

.medium {
  --min-size: 9px;
}

.small {
  --min-size: 6px;
}

.with-children {
  border-radius: 4px;
}

.with-children.medium {
  padding: 4px 4px;
}

.with-children.small {
  padding: 2px 4px;
}

.neutral {
  --background-color: var(--color-neutral-darkest);
}

.ruby {
  --background-color: var(--color-ruby);
}

@import '@teamleader/ui-colors';
@import '@teamleader/ui-utilities';
@import '@teamleader/ui-typography';

:root {
  --border-radius: 4px;
}

.counter {
  background: var(--background-color);
  border-radius: 50%;
  color: var(--color-white);
  display: inline-block;
  font-family: var(--font-family-bold);
  font-size: calc(1.24 * var(--unit));
  font-weight: 500;
  line-height: 1;
  letter-spacing: .25px;
  min-height: var(--min-size);
  min-width: var(--min-size);
}

.medium {
  --min-size: 9px;
}

.small {
  --min-size: 6px;
}

.with-children {
  border-radius: 4px;
}

.with-children.medium {
  padding: 5px 4px 3px 4px;
}

.with-children.small {
  padding: 3px 4px 1px 4px;
}

.neutral {
  --background-color: var(--color-neutral-darkest);
}

.ruby {
  --background-color: var(--color-ruby);
}

Apply new font styles to the counters
Apply new font styles to the counters
