@layer lotek {
  .lt-spinner {
    box-sizing: border-box;
    display: inline-block;
    inline-size: var(--lt-spinner-size, var(--lt-spacing-6));
    block-size: var(--lt-spinner-size, var(--lt-spacing-6));
    border: var(--lt-spinner-thickness, 2px) solid
      var(--lt-color-neutral-surface);
    border-block-start-color: var(--lt-color-accent-border);
    border-radius: 50%;
    animation: lt-spinner-rotate 800ms linear infinite;
  }

  .lt-spinner[data-size="small"] {
    inline-size: var(--lt-spacing-4);
    block-size: var(--lt-spacing-4);
  }

  .lt-spinner[data-size="large"] {
    inline-size: var(--lt-spacing-10);
    block-size: var(--lt-spacing-10);
    border-width: 3px;
  }

  @keyframes lt-spinner-rotate {
    to {
      transform: rotate(360deg);
    }
  }

  /* The user has asked for less motion. It then spins more slowly rather
     than standing still: an indicator that does not move no longer says that
     something is going on. */
  @media (prefers-reduced-motion: reduce) {
    .lt-spinner {
      animation-duration: 2400ms;
    }
  }

  /* High contrast: all four borders are forced to the same colour, and the
     ring becomes an even circle. It still spins, but `Highlight` brings back
     the mark that shows something is happening. */
  @media (forced-colors: active) {
    .lt-spinner {
      border-block-start-color: Highlight;
    }
  }
}