@layer components {
  .loader {
    --loader-size: 2.5rem;
    --loader-color: var(--color-accent);
    --loader-track-color: var(--color-border);
    --loader-border-width: 3px;
    --loader-speed: 1s;

    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    block-size: 100%;
  }

  .loader--cover {
    position: absolute;
    inset: 0;
    background: var(--color-panel);
  }

  .loader--cover[hidden] {
    display: none;
  }

  .loader__spinner {
    inline-size: var(--loader-size);
    block-size: var(--loader-size);
    border: var(--loader-border-width) solid var(--loader-track-color);
    border-top-color: var(--loader-color);
    border-radius: 50%;
    animation: loader-spin var(--loader-speed) linear infinite;
  }

  @keyframes loader-spin {
    to { transform: rotate(360deg); }
  }
}