/**
 * Skip to main content link.
 *
 * Based on visually-hidden-focusable but with a background to ensure contrast
 */

@use "../settings" as *;
@use "../tools" as *;

.skip-link {
  @include transition($btn-transition);
  display: block;
  padding: space(1) space(3);
  background-color: $white;

  &:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 $focus-ring-blur $focus-ring-width rgba(var(--#{$prefix}link-focus-ring-rgb), $focus-ring-opacity);
  }
}

.skip-link:not(:focus-visible):not(:focus-within) {
  @include visually-hidden();
}