@layer components {
  .status-badge {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
  }

  .status-badge i {
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
  }

  .status-pill {
    padding: 5px 10px;
    color: #fff;
    background: var(--green);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
  }

  .status-pill.status-atencao,
  .status-pill.status-ocioso {
    background: var(--amber);
  }

  .status-pill.status-critico,
  .status-pill.status-offline {
    background: var(--red);
  }

  .status-pill.status-sem-dados {
    background: var(--muted);
  }

  .status-badge.status-operando {
    color: var(--green);
  }

  .status-badge.status-atencao,
  .status-badge.status-ocioso {
    color: var(--amber);
  }

  .status-badge.status-critico,
  .status-badge.status-offline {
    color: var(--red);
  }

  .status-badge.status-sem-dados {
    color: var(--muted);
  }

  .dot-operando {
    background: var(--green);
  }

  .dot-atencao,
  .dot-ocioso {
    background: var(--amber);
  }

  .dot-critico,
  .dot-offline {
    background: var(--red);
  }

  .dot-sem-dados {
    background: var(--muted);
  }
}