/**
 * 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 {
    text-decoration: $link-hover-decoration;
    outline: 0;
  }

  &:hover {
    color: color-contrast($btn-link-color);
    background-color: $btn-link-color;
  }
}

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