/*
 * A donut and its legend. WHERE the legend sits is a question about this
 * chart's own width, so it is a container query rather than a measurement —
 * and there is no first frame drawn in the wrong arrangement.
 *
 * CONTENT-SIZED, for the reason written out on `bar_chart.css`.
 *
 * The seams between slices are the GROUND's colour, so the donut reads as
 * segments rather than as a colour wheel — and follows the card it sits on.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-pie-chart {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    container-type: inline-size;
  }

  /* The narrow arrangement is the DEFAULT, so a container that never reports a
     width still stacks rather than crushing the legend beside the donut. */
  .lotics-pie-chart__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    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;
  }

  /* The figure sits ON the donut, and nothing in it takes a press. */
  .lotics-pie-chart__center {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
  }

  /* Full width UNDER the donut, a flexing column BESIDE it. */
  .lotics-pie-chart__legend {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: var(--lotics-space-8);
  }

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

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

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

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

  /* Two fixed figure columns, so the counts and the shares each line up down the
     legend instead of tracking whatever the name beside them measures. */
  .lotics-pie-chart__value,
  .lotics-pie-chart__share {
    min-width: 40px;
  }
}