Multi outline focus state using box-shadow

focus.css

// Using two contrasting box-shadow colours means it doesn't matter what background colour the element is over.

&:focus {
  outline: transparent;
  box-shadow: 0 0 0 2px black, /* inner colour here */
              0 0 0 4px white; /* outer colour here */
}