/* The legend's position is a container query on the chart's own width, so no first frame is wrong. The ring
   and its legend are one group at their own size, centred on both axes of the box the chart is given — a
   card stretched wide or tall reads the ring in its middle, never hugging a corner. In a readings grid of a
   phone's column the legend rows take the whole width under the ring instead, so every ring card of one
   screen reads alike. Seams in the ground's colour make segments, not a colour wheel. */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  /* An inline-size container has no content width, so the chart takes its line rather than drawing zero
     wide; it grows into the height its box gives it, so the group centres there too. */
  .lotics-pie-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    width: 100%;
    container-type: inline-size;
  }

  /* Narrow is the default, so an unreported width stacks. */
  .lotics-pie-chart__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    gap: var(--lotics-space-16);
  }

  @container (min-width: 320px) {
    .lotics-pie-chart__wrapper {
      flex-direction: row;
      align-items: center;
      gap: var(--lotics-space-24);
    }
  }

  .lotics-pie-chart__pie {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--lotics-pie-chart-size);
    height: var(--lotics-pie-chart-size);
  }

  .lotics-pie-chart__chart {
    display: block;
  }

  .lotics-pie-chart__slice {
    fill: var(--lotics-pie-chart-slice);
    stroke: var(--card);
    stroke-width: 2;
  }

  /* A segment presses as its legend row does, which carries its name and its keyboard stop; a coloured
     ground steps toward the shadow, as a brand's button does. */
  .lotics-pie-chart__slice[data-pressable] {
    cursor: pointer;
  }

  .lotics-pie-chart__slice[data-pressable]:hover {
    fill: color-mix(in srgb, var(--lotics-shadow-color) var(--lotics-on-solid-hover), var(--lotics-pie-chart-slice));
  }

  /* Nothing on the donut takes a press. */
  .lotics-pie-chart__center {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
  }

  /* At its own width, never the card's: a stretched card keeps each count beside its name. */
  .lotics-pie-chart__legend {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: max-content;
    max-width: 100%;
    gap: var(--lotics-space-8);
  }

  @container (min-width: 320px) {
    .lotics-pie-chart__legend {
      flex: 0 1 auto;
      min-width: 0;
      max-width: 360px;
    }
  }

  .lotics-pie-chart__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-8);
  }

  /* A pressable legend row's wash bleeds past its words and over half the gap above and below, as a bar
     chart's row's does. */
  .lotics-pie-chart__item[data-pressable] {
    padding: var(--lotics-space-4) var(--lotics-row-wash-bleed);
    margin: calc(var(--lotics-space-4) * -1) calc(var(--lotics-row-wash-bleed) * -1);
  }

  .lotics-pie-chart__swatch {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: var(--lotics-radius-full);
    background-color: var(--lotics-pie-chart-slice);
  }

  /* A face against its swatch: the slice's colour and who it is read as one key, a rung from the name. */
  .lotics-pie-chart__lead {
    flex-shrink: 0;
    width: var(--lotics-mark-sm);
    /* The row's rung, less four. */
    margin-inline-start: calc(var(--lotics-space-4) * -1);
  }

  .lotics-pie-chart__label {
    flex: 1;
    min-width: 0;
  }

  /* Columns so counts and shares line up: the counts at the widest one's ink, as a bar chart's figures, so a
     name keeps the room; a share at a floor holding it apart from its count. */
  .lotics-pie-chart__value {
    min-width: var(--lotics-pie-chart-figure);
  }

  .lotics-pie-chart__share {
    min-width: 40px;
  }

  /* A phone's column of readings: the ring centred over legend rows the card's width, each name at the left
     and its count and share at the right edge — the same on every ring card of the screen, whatever its
     names' length. Last, so it holds over the chart's own width. */
  @container lotics-reading-grid (width <= 720px) {
    .lotics-pie-chart__wrapper {
      flex-direction: column;
      align-items: center;
      align-self: stretch;
      gap: var(--lotics-space-16);
    }

    .lotics-pie-chart__legend {
      align-self: stretch;
      width: auto;
      max-width: none;
    }
  }

  /* In a register's readings band, whose line is one low height: the ring stands beside its legend at any
     width, the legend's rows packed tight, each name on one line. */
  @container lotics-reading-band (width >= 0px) {
    .lotics-pie-chart__wrapper {
      flex-direction: row;
      align-items: center;
      gap: var(--lotics-space-16);
    }

    .lotics-pie-chart__legend {
      flex: 0 1 auto;
      min-width: 0;
      gap: 0;
    }

    .lotics-pie-chart__item[data-pressable] {
      padding-block: 0;
      margin-block: 0;
    }

    .lotics-pie-chart__label[data-clamped] {
      -webkit-line-clamp: 1;
      line-clamp: 1;
    }

    .lotics-pie-chart__share {
      min-width: 32px;
    }

    /* Too narrow for the ring at the band's height beside a name, its count and its share: the ring draws
       smaller with no total in it (the legend's counts are the total's parts), and the share goes, so each
       name keeps its words. */
    @container (width < 260px) {
      .lotics-pie-chart__wrapper {
        gap: var(--lotics-space-12);
      }

      .lotics-pie-chart__pie {
        width: 64px;
        height: 64px;
      }

      .lotics-pie-chart__chart {
        width: 100%;
        height: 100%;
      }

      .lotics-pie-chart__center,
      .lotics-pie-chart__share {
        display: none;
      }
    }
  }
}