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

.label {
  border-style: solid;
  border-width: 1px;
  composes: reset-font-smoothing;
  display: inline-block;
  font-family: var(--font-family-medium);
  vertical-align: middle;
}

.neutral {
  background-color: color(var(--color-neutral) a(48%));
  border-color: color(var(--color-neutral-dark) a(48%));
  color: var(--color-teal-darkest);
}

@each $color in (mint, violet, ruby, gold, aqua) {
  .$(color) {
    background-color: color(var(--color-$(color)-light) a(48%));
    border-color: color(var(--color-$(color)-light) a(48%));
    color: var(--color-$(color)-darkest);
  }
}

.medium {
  font-size: calc(1.4 * var(--unit));
  line-height: calc(1.8 * var(--unit));
  border-radius: 14px;
  padding: 3px 12px;
}

.small {
  font-size: calc(1.2 * var(--unit));
  line-height: calc(1.4 * var(--unit));
  border-radius: 11px;
  padding: 2px 12px;
}

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

.label {
  border-style: solid;
  border-width: 1px;
  composes: reset-font-smoothing;
  display: inline-block;
  font-family: var(--font-family-medium);
  text-transform: none;
  vertical-align: middle;
}

.neutral {
  background-color: color(var(--color-neutral) a(48%));
  border-color: color(var(--color-neutral-dark) a(48%));
  color: var(--color-teal-darkest);
}

@each $color in (mint, violet, ruby, gold, aqua) {
  .$(color) {
    background-color: color(var(--color-$(color)-light) a(48%));
    border-color: color(var(--color-$(color)-light) a(48%));
    color: var(--color-$(color)-darkest);
  }
}

.medium {
  font-size: calc(1.4 * var(--unit));
  line-height: calc(1.8 * var(--unit));
  border-radius: 14px;
  padding: 3px 12px;
}

.small {
  font-size: calc(1.2 * var(--unit));
  line-height: calc(1.4 * var(--unit));
  border-radius: 11px;
  padding: 2px 12px;
}

h1,
h2,
h3,
h4,
p {
  .label {
    margin-left: 6px;
  }
}

Add styles to ensure consistency when status label is placed inline of Text
Add styles to ensure consistency when status label is placed inline of Text
