Cacher is the code snippet organizer for pro developers

// https://github.com/WICG/focus-ring

$color-focus: #99ffbd;
$box-shadow: 0 0 1px 2px $color-gray-coal;

a:focus,
button.focus-ring,
input[type='text'] {
    outline-color: $color-focus;
}

input[type='checkbox'].focus-ring + span {
  box-shadow: 0 0 2px 1px $color-focus;
}

input[type='range'].focus-ring {
  box-shadow: $box-shadow;

  &::-webkit-slider-thumb {
    box-shadow: $box-shadow;
  }

  &::-moz-range-thumb {
    box-shadow: $box-shadow;
  }

  &::-ms-thumb {
    box-shadow: $box-shadow;
  }
}