$gauge-size: 10em;
$gauge-pointer-size: $gauge-size * 0.03;

.gauge--radial {
  position: relative;
  width: $gauge-size;

  &__inner {
    background: palette(gray, x-light);
    border-radius: $gauge-size $gauge-size 0 0;
    height: $gauge-size / 2;
    overflow: hidden;
    position: relative;
    width: $gauge-size;

    &::after {
      background: white;
      border-radius: $gauge-size $gauge-size 0 0;
      bottom: 0;
      content: '';
      display: block;
      height: $gauge-size * 0.47;
      left: 50%;
      transform: translateX(-50%);
      position: absolute;
      width: $gauge-size * 0.95;
      z-index: 4;
    }
  }

  &__pointer {
    top: calc(50% - 1.5em);
    height: $gauge-size / 2;
    width: 0;
    left: 50%;
    position: absolute;
    z-index: 5;

    &::after {
      content: '';
      border-left: 0.3em solid transparent;
      border-right: 0.3em solid transparent;
      border-bottom: $gauge-size / 2 solid palette(red, salmon);
      transform: translate(-50%, 0);
      display: block;
    }

    &__base {
      width: 2em;
      height: 2em;
      background: none;
      border-radius: 21em;
      top: 3.75em;
      box-shadow: 0 0 32px 0 rgba(black, 0.25), 0 5px 15px rgba(black, 0.025), 0 0 0 $gauge-size white inset;
      left: 50%;
      padding: 0.25em;
      position: absolute;
      transform: translateX(-50%);
      z-index: 100;
    }
  }

  &__area {
    background: rgba(palette(gray), 0.3);
    border-radius: $gauge-size $gauge-size 0 0;
    height: $gauge-size / 2;
    position: absolute;
    transform-origin: center bottom;
    transition: background 0.2s linear;
    width: $gauge-size;
    z-index: 2;

    .good & {
      background: palette(green, bright);
    }

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

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

    &--danger {
      background: rgba(darken(palette(red, salmon), 2%), 0.2);

      .gauge--radial--active & {
        background: darken(palette(red, salmon), 2%);
      }
    }
  }

  &__val {
    background: palette(gray, x-light);
    border-radius: 2px;
    box-shadow: 0 1px 0 palette(gray, light) inset;
    color: palette(gray);
    font-size: 1em;
    overflow: hidden;
    padding: 0.25em;
    text-align: center;
    transition: color 1s linear, text-shadow 1s linear;

    .gauge--radial--active & {
      color: palette(gray);
      text-shadow: 0 0 2px palette(gray, xx-light), 0 0 20px rgba(palette(gray, xx-light), 0.25);
    }
  }

  &__unit {
    position: absolute;
    top: -2.3em;
    z-index: 5;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    color: palette(gray);
  }
}