/* SKIP-LINK BLOCK */

/* The skip link is visually hidden when it is not focused. */
/* It exists so when a user hits tab on load, they can quickly */
/* skip to the main content of the site—avoiding navigation etc */
.skip-link {
  z-index: 9999;
  display: inline-block;
  width: max-content;
  max-width: 10rem;
  right: var(--gutter);
  width: auto;
  line-height: 1;
  position: absolute;
}

.skip-link:focus,
.skip-link:focus-visible {
  background: var(--color-text);
  color: var(--color-background) !important;
}

.skip-link:not(:focus) {
  /* @extend .visually-hidden */
  border: 0;
  clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
  height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
