@layer components {

  /* Navigation gizmo (shared/_gizmo): axis balls placed by plan/gizmo.js around the dial's centre. */
  /* Right-aligned, like the toggles stacked under it (shared/_corner). */
  .gizmo {
    display: grid;
    justify-items: end;
    gap: 6px;
  }

  .gizmo__dial {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    transition: background-color 0.15s;

    &:hover {
      background: color-mix(in oklch, var(--color-surface) 55%, transparent);
    }
  }

  .gizmo__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }

  .gizmo__line {
    stroke-width: 2.5;
    stroke-linecap: round;
  }

  .gizmo__line--x {
    stroke: var(--color-axis-x);
  }

  .gizmo__line--y {
    stroke: var(--color-axis-y);
  }

  .gizmo__line--z {
    stroke: var(--color-axis-z);
  }

  .gizmo__ball {
    --c: var(--color-ink);
    position: absolute;
    top: calc(50% - 11px);
    left: calc(50% - 11px);
    width: 22px;
    height: 22px;
    padding: 0;
    font: 700 11px/1 ui-monospace, monospace;
    color: var(--black);
    background: var(--c);
    border: 0;
    border-radius: 50%;

    &:hover {
      box-shadow: 0 0 0 2px var(--white);
    }
  }

  .gizmo__ball--negative {
    background: color-mix(in oklch, var(--c) 22%, transparent);
    box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--c) 75%, transparent);

    &:hover {
      background: color-mix(in oklch, var(--c) 45%, transparent);
      box-shadow: inset 0 0 0 2px var(--c), 0 0 0 2px var(--white);
    }
  }

  .gizmo__ball--x {
    --c: var(--color-axis-x);
  }

  .gizmo__ball--y {
    --c: var(--color-axis-y);
  }

  .gizmo__ball--z {
    --c: var(--color-axis-z);
  }

  .gizmo__projection,
  .gizmo__toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;

    & .tool-button__icon {
      width: 14px;
      height: 14px;
    }
  }
}