/*
 * One whole, then its slices ranked beneath it. A drillable row's wash bleeds with net-zero margin so
 * swatches align with the bar.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-breakdown {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--lotics-space-12);
    /*
     * Its own container: facets sit side by side, and a viewport query would answer for all at
     * once.
     */
    container: lotics-breakdown / inline-size;
  }

  .lotics-breakdown__rows,
  .lotics-breakdown__panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /*
   * A grid, narrow by default: label on the first line, figure and share under it. As a flex line
   * only the label could give way, so it rendered at nothing beside a full figure.
   */
  .lotics-breakdown__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "swatch label label"
      ".      value share";
    align-items: center;
    column-gap: var(--lotics-space-8);
    row-gap: var(--lotics-space-2);
    min-height: 36px;
    border-radius: calc(var(--lotics-radius-control) - var(--lotics-space-2));
    padding-inline: var(--lotics-row-wash-bleed);
    margin-inline: calc(var(--lotics-row-wash-bleed) * -1);
  }

  /*
   * Derived: swatch and gaps take 32, money ~100 and the share five characters, so under 320 the
   * label falls below `FLEX_MIN_WIDTH`.
   */
  @container lotics-breakdown (width >= 320px) {
    .lotics-breakdown__row {
      grid-template-columns: auto 1fr auto auto;
      grid-template-areas: "swatch label value share";
    }
  }

  .lotics-breakdown__swatch {
    grid-area: swatch;
    width: 8px;
    height: 8px;
    border-radius: var(--lotics-radius-full);
    background-color: var(--lotics-breakdown-swatch);
  }

  .lotics-breakdown__label {
    grid-area: label;
    min-width: 0;
  }

  /* A cut money string is a wrong number, so the figure takes the second line. */
  .lotics-breakdown__value {
    grid-area: value;
    min-width: 0;
  }

  /*
   * Constant so every share ends on one x (each row is its own grid). Five characters, since "100%"
   * wrapped at 30px.
   */
  .lotics-breakdown__share {
    grid-area: share;
    width: 5ch;
  }

  .lotics-breakdown__toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-4);
    min-height: 32px;
    border: 0 solid var(--border);
    border-radius: calc(var(--lotics-radius-control) - var(--lotics-space-2));
    padding-inline: var(--lotics-row-wash-bleed);
    margin-inline: calc(var(--lotics-row-wash-bleed) * -1);
    background-color: transparent;
    background-image: none;
    font-family: var(--font-sans);
    color: var(--lotics-ink-default);
    text-align: start;
    appearance: none;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    transition: background-color var(--lotics-duration-fast) var(--lotics-ease-standard);
  }

  .lotics-breakdown__toggle:hover {
    background-color: var(--lotics-wash-selected);
  }

  .lotics-breakdown__toggle:active {
    background-color: var(--lotics-wash-press);
  }

  .lotics-breakdown__toggle:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: 0;
  }
}