pinafore/src/scss/focus.scss

:focus {
  outline: var(--focus-width) solid var(--focus-outline);
}

.container:focus {
  // the outline causes choppy rendering on Edge and isn't visible or necessary anyway
  // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17343598/
  outline: none;
}

/* Special class to make focus outlines easier to see in some odd
 * cases where the outline would be clipped. */
/* TODO: use box-sizing:border-box everywhere so we can get rid of this hack */
.focus-fix:focus {
  outline-offset: calc(-1 * var(--focus-width)); /* TODO: this is hacky, switch to box-sizing:border-box */
}

/* Another hack to make some focus styles appear better */
.focus-after {
  position: relative;

  &:focus {
    outline: none;
  }

  &:focus::after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    content: '';
    border: var(--focus-width) solid var(--focus-outline);
    pointer-events: none;
  }
}

// For KaiOS, do some additional things to improve the focus styles, which don't show up well
// for some reason
@media (max-width: 240px) {
  a:not(.button):focus, span:focus {
    background: var(--focus-bg) !important;
  }

  button:focus, .button:focus {
    opacity: 0.7;
  }

  button.primary:focus, .button.primary:focus {
    opacity: 0.8;
  }

  // add extremely visible styles for buttons, ala .focus-after
  button, .button, a.main-nav-link {
    position: relative;

    &:focus {
      outline: none;
    }

    &:focus::after {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      content: '';
      border: var(--focus-width) solid var(--focus-outline);
      pointer-events: none;
    }

  }
}