/*
Copyright 2026 Element Creations Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

.meter {
  display: flex;
  align-items: center;
  gap: var(--cpd-space-3x);
  padding-block: var(--cpd-space-2x);
  /* Aligned with the device rows above: a menu item reserves a trailing column
     for its chevron and gives its label an end margin, so the text stops well
     short of the item's own padding. Without the same inset the bars run past
     where the device names end. */
  padding-inline-start: var(--cpd-space-4x);
  padding-inline-end: calc(var(--cpd-space-4x) * 2 + var(--cpd-space-2x));
}

.icon {
  color: var(--cpd-color-icon-secondary);
  flex-shrink: 0;
  /* Same width as a device row's icon column, so the bars start where the
     device names start. */
  inline-size: 24px;
}

.segments {
  /* A bar and the space beside it are always the same size; what changes with
     the width available is how many bars there are. Spreading a fixed number of
     bars instead would make the meter a different shape in every place it is
     used, and close them up into one solid block wherever the space ran short —
     and a meter whose bars touch stops reading as a count, which is what
     carries the level for anyone who cannot rely on the colour.

     Both sizes are set here and nowhere else: the component reads them back off
     the rendered bars to work out how many fit. */
  flex: 1;
  /* The width decides the count, never the other way round. Containment is
     what enforces that: without it the bars are both a floor under the width
     and the widest thing in the menu, so the meter would set the menu's width
     and the device names — which are what a person is reading — would have to
     fit around it. */
  contain: inline-size;
  min-inline-size: 0;
  display: flex;
  align-items: center;
  /* Half again as wide as a bar, as the design has it: bars set as close as
     their own width read as a solid block long before they touch. */
  gap: var(--cpd-space-1-5x);
}

.segment {
  flex: none;
  inline-size: var(--cpd-space-1x);
  block-size: var(--cpd-space-4x);
  border-radius: var(--cpd-space-1x);
  background: var(--cpd-color-bg-subtle-primary);
}

/* Filled segments carry the level by count as well as by colour, so the meter
   stays readable without relying on hue. */
.segmentLit {
  background: var(--cpd-color-bg-accent-rest);
}

.message {
  color: var(--cpd-color-text-secondary);
}