/*
 * WORK IN FLIGHT, in its two marks. The spinner is one element whose border is the ring; the dots'
 * gutter is two fifths of the dot, not a spacing rung, so it scales with the dot. `currentColor`
 * makes the ink one declaration for both.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-activity-indicator {
    color: var(--lotics-activity-indicator-color, var(--lotics-ink-default));
    /* An icon-scale mark never gives way on a row. */
    flex-shrink: 0;
  }

  .lotics-activity-indicator[data-variant="spinner"] {
    display: inline-block;
    width: var(--lotics-activity-indicator-size);
    height: var(--lotics-activity-indicator-size);
    border-style: solid;
    border-width: calc(var(--lotics-activity-indicator-size) / 8);
    border-color: color-mix(in srgb, currentColor 20%, transparent);
    border-top-color: currentColor;
    border-radius: var(--lotics-radius-full);
    animation-name: lotics-activity-indicator-spin;
    /* 720ms a turn: slow enough to read as motion, not flicker. */
    animation-duration: calc(var(--lotics-duration-slow) * 3);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  .lotics-activity-indicator[data-variant="dots"] {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--lotics-activity-indicator-size) / 2.5);
  }

  .lotics-activity-indicator__dot {
    display: block;
    width: var(--lotics-activity-indicator-size);
    height: var(--lotics-activity-indicator-size);
    flex-shrink: 0;
    border-radius: var(--lotics-radius-full);
    background: currentColor;
    animation-name: lotics-activity-indicator-bounce;
    /* One rung is the stagger, so the rhythm moves together with the token. */
    animation-duration: calc(var(--lotics-duration-base) * 10);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  .lotics-activity-indicator__dot:nth-child(2) {
    animation-delay: var(--lotics-duration-base);
  }

  .lotics-activity-indicator__dot:nth-child(3) {
    animation-delay: calc(var(--lotics-duration-base) * 2);
  }

  /* An infinite animation collapsed to 1ms strobes instead of stopping (docs/theming.md §2.3). */
  @media (prefers-reduced-motion: reduce) {
    .lotics-activity-indicator[data-variant="spinner"],
    .lotics-activity-indicator__dot {
      animation: none;
    }
  }

  @keyframes lotics-activity-indicator-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes lotics-activity-indicator-bounce {
    0% {
      transform: translateY(0);
    }
    16.67% {
      transform: translateY(-8px);
    }
    38.89% {
      transform: translateY(-8px);
    }
    55.56% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(0);
    }
  }
}