@layer states {
  .loading {
    opacity: 0.6;
    pointer-events: none;
  }

  .loading::after {
    content: '...';
    animation: dots 1.2s steps(3) infinite;
  }

  @keyframes dots {
    0% { content: '.'; }
    33% { content: '..'; }
    66% { content: '...'; }
  }

  body:has(.modal-overlay:not(.hidden)) {
    overflow: hidden;
  }

  .schema-table-name .expand-icon.expanded {
    transform: rotate(90deg);
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
}