/* Rows on one shared ruler, three boxes each: track (the ruler), fill (the row's share), segments
   (splitting the fill); dropping the middle loses the scale. Shares are properties, so a segment restyles
   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);
  }

  /* More between rows than within one, so a row's name, bar and sentence 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);
  }

  /* The mark a rung from its name, the figure further from the words. */
  .lotics-stacked-bar-chart__head {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--lotics-space-6);
  }

  /* A line's mark (`datum_lead.css`), centred on the label's line box, not the head, so a two-line row keeps the
     mark on its first line. */
  .lotics-stacked-bar-chart__leading {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--lotics-mark-sm);
    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 text block beside it takes a narrow row's deficit. */
  .lotics-stacked-bar-chart__value {
    flex-shrink: 0;
    margin-inline-start: var(--lotics-space-10);
  }

  .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);
  }
}