/*
 * Rows of stacked bars on ONE SHARED RULER. Three boxes per row and not two:
 * the track is the ruler, the fill is this row's share of it, and the segments
 * split the fill — collapsing the middle one is exactly how a stacked bar loses
 * its scale.
 *
 * Every share is DATA and arrives as a property, so a consumer can restyle a
 * segment without `!important`.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-stacked-bar-chart {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: var(--lotics-space-16);
  }

  .lotics-stacked-bar-chart__legend {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lotics-space-16);
  }

  /* Between two rows, more than between a row's own name, bar and sentence:
     the three belong to one campaign and have to read as one object. */
  .lotics-stacked-bar-chart__rows {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--lotics-space-24);
  }

  .lotics-stacked-bar-chart__row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--lotics-space-6);
  }

  .lotics-stacked-bar-chart__head {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--lotics-space-16);
  }

  /* The mark centres on the LABEL'S OWN LINE BOX, not on the head — a row that
     also carries `meta` is two lines tall, and centring on the head would drift
     the mark down between them for that row only. Giving the slot the line box's
     height and centring inside it lands any mark on the first line whatever the
     mark's size, so a dot and a 24px avatar both sit right without either being
     measured. */
  .lotics-stacked-bar-chart__leading {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: var(--lotics-leading-tight-sm);
  }

  .lotics-stacked-bar-chart__text {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    gap: var(--lotics-space-2);
  }

  /* The figure keeps its content width; the text block beside it is the item
     that says it may give way, and it takes the whole of a narrow row's deficit
     whether or not this one also yields. */
  .lotics-stacked-bar-chart__value {
    flex-shrink: 0;
  }

  .lotics-stacked-bar-chart__track {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: var(--lotics-stacked-bar-chart-height);
    border-radius: var(--lotics-radius-full);
    overflow: hidden;
    background-color: var(--muted);
  }

  .lotics-stacked-bar-chart__fill {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: var(--lotics-stacked-bar-chart-share);
    min-width: 2px;
  }

  .lotics-stacked-bar-chart__segment {
    flex-grow: var(--lotics-stacked-bar-chart-weight);
    flex-basis: 0;
    background-color: var(--lotics-stacked-bar-chart-color);
  }
}