/*
 * Status Dot Component
 * Small colored dot indicators for status
 */

@layer components {
  .status-dot {
    display: inline-block;
    width: var(--status-dot-size);
    height: var(--status-dot-size);
    border-radius: var(--radius-full);
    margin-right: var(--inline-space-half);
  }

  .status-dot--success {
    background-color: var(--color-green);
  }

  .status-dot--warning {
    background-color: var(--color-red-light);
  }

  .status-dot--danger {
    background-color: var(--color-red);
  }
}