/**
 * @file stat.css
 * @component Stat (Data)
 * @description Presents a value, label, and optional supporting content.
 *
 * @section Public custom properties
 * None.
 *
 * @section Private custom properties
 * None.
 */
:where([data-component-id="marsal_sdc:stat"]) {
  display: grid;
  gap: var(--marsal-space-2xs);
  min-inline-size: 0;
  color: var(--marsal-color-textPrimary);

  & > .marsal-stat__value,
  & > .marsal-stat__phrase {
    color: var(--marsal-color-textStrong);
    font-family: var(--marsal-fontFamily-display-small);
    font-size: var(--marsal-fontSize-display-small);
    font-weight: var(--marsal-fontWeight-display-small);
    line-height: var(--marsal-lineHeight-display-small);
    text-transform: uppercase;
    overflow-wrap: anywhere;
  }

  &[data-component-variant="featured"] > .marsal-stat__value {
    font-size: var(--marsal-fontSize-display-large);
  }

  & > .marsal-stat__label {
    font-family: var(--marsal-fontFamily-label-standard);
    font-weight: var(--marsal-fontWeight-label-standard);
  }

  & > .marsal-stat__supporting {
    color: var(--marsal-color-textMuted);
  }

  &[data-component-variant="total"] {
    gap: var(--marsal-space-xs);
    font-family: var(--marsal-fontFamily-body-standard);
    font-size: var(--marsal-fontSize-body-standard);
    font-weight: var(--marsal-fontWeight-body-standard);
    line-height: var(--marsal-lineHeight-body-standard);
    letter-spacing: var(--marsal-letterSpacing-body-standard);

    & > .marsal-stat__phrase {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: var(--marsal-space-2xs);
      color: var(--marsal-color-textBrand);
      letter-spacing: var(--marsal-letterSpacing-display-small);
      font-variant-numeric: tabular-nums;
    }

    & > .marsal-stat__supporting {
      color: inherit;
    }
  }
}