.fab-state-label {
  // --status-color needs to be defined in the component's CSS
  --status-color: var(--gray-hard-darkest);
  display: flex;
  align-items: center;
  @include text-sm;
  line-height: 1.714;
  color: var(--status-color);
  
  &.bg {
    width: fit-content;
    padding: 0.4rem 0.8rem;
    justify-content: center;
    background-color: var(--gray-soft-light);
    border-radius: var(--border-radius);
    color: var(--gray-hard-darkest);
  }

  &::before {
    flex-shrink: 0;
    content: "";
    margin-right: 0.8rem;
    width: 1rem;
    height: 1rem;
    background-color: var(--status-color);
    border-radius: 50%;
  }
}