packages/styles/scss/components/_meter-bar.scss

   1 .meter-bar {
   2         --size: #{em(10)};
   3         --meter-bar-background-color: var(--border-norm);
   4         --meter-bar-thumb-color-success: var(--signal-success);
   5
   6         inline-size: 100%;
   7         overflow: hidden;
   8         background-color: var(--meter-bar-background-color);
   9
  10         &,
  11         &-thumb {
  12                 block-size: var(--size);
  13         }
  14
  15         &-thumb {
  16                 min-inline-size: 3%;
  17                 background: var(--meter-bar-thumb-color-success);
  18
  19                 &--warning {
  20                         background: var(--signal-warning);
  21                 }
  22
  23                 &--danger {
  24                         background: var(--signal-danger);
  25                 }
  26         }
  27
  28         &:not(.is-squared),
  29         &:not(.is-squared) &-thumb {
  30                 border-radius: calc(var(--size) / 2);
  31         }
  32
  33         &.is-thin {
  34                 --size: #{em(4)};
  35         }
  36 }