.gauge {
  &--linear {
    height: 0.75em;
    width: calc(100% - 8px);
    background: white;
    border-radius: 2em;
    box-shadow: 0 0 0 4px palette(gray, x-light);
    display: flex;
    overflow: hidden;
    margin: 4px;
    position: relative;

    &.show-val {
      height: 1.35em;

      .title-text {
        margin-left: 0.5em;
      }
    }

    &__fill {
      position: relative;
      border-radius: 2em;
      background: palette(green, bright);

      .okay & {
        background: palette(orange, light);
      }

      .bad & {
        background: palette(orange, bittersweet);
      }

      .title-text {
        position: absolute;
        color: white;
        right: 0.5em;
      }
    }
  }
}