@layer components {
  .status {
    text-transform: capitalize;
    font-weight: 500;

    &:before {
      content: '';
      display: inline-block;
      border-radius: 50%;
      margin-right: 6px;
      height: 8px;
      width: 8px;
    }

    &.active:before { background: #00db1c; }

    &.pending:before {background: #ffdc00; }

    &.inactive {
      filter: grayscale(1);
      font-weight: 400;
      opacity: .5;
    }
  }
}