.ob-number__output {
  background-color: $grey;
  color: $white;
  text-align: center;
  padding: $size-8;
  border-radius: $radius;
  position: relative;
  font-size: $size-7;
  display: inline-block;
  min-width: $size-3;
  -webkit-transition:
    background-color 0.2s ease,
    color 0.2s ease;
  -moz-transition:
    background-color 0.2s ease,
    color 0.2s ease;
  -o-transition:
    background-color 0.2s ease,
    color 0.2s ease;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;

  &:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: solid 6px $grey;
    border-left: solid 6px transparent;
    border-right: solid 6px transparent;
    -webkit-transition: border-top-color 0.2s ease;
    -moz-transition: border-top-color 0.2s ease;
    -o-transition: border-top-color 0.2s ease;
    transition: border-top-color 0.2s ease;
  }

  &.is-dragging {
    background-color: $primary;
    color: $primary-invert;

    &:after {
      border-top-color: $primary;
    }
  }
}

// While these are identical CSS attributes, they need to be kept
// separated, if a browser cannot understand one of these properties,
// the css will not be applied.

// Works for all other major browser except Firefox
input[type='range']:focus-visible::-webkit-slider-thumb {
  outline-offset: $size-9;
  outline: $input-focus-border-color auto 3px;
}
// Works for Firefox
input[type='range']:focus-visible::-moz-range-thumb {
  outline-offset: $size-9;
  outline: $input-focus-border-color auto 3px;
}