@mixin focus($focus-color: #{var(--nj-semantic-color-border-brand-strong)}, $scale: 0.85) {
  content: "";
  position: absolute;
  top: calc(-1 * var(--nj-semantic-size-border-focus-ring-offset));
  left: calc(-1 * var(--nj-semantic-size-border-focus-ring-offset));
  padding: var(--nj-semantic-size-border-focus-ring-offset);
  border-radius: var(--nj-semantic-size-border-radius-none);
  z-index: 10;
  box-sizing: content-box;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 0 var(--nj-semantic-size-border-focus-ring-width) $focus-color;
  opacity: 0;
  transform: scale3d($scale, $scale, 1);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  transition-timing-function: var(--nj-semantic-motion-easing-fast-out-slow-in);
}

@mixin focus-visible() {
  transform: scale3d(1, 1, 1);
  opacity: 1;
}