/**
 * @file
 * Skip link styles.
 */

.skip-link {
  align-items: center;
  background-color: var(--gray-900);
  color: var(--white);
  display: flex;
  outline: none;
  padding-block: var(--size-2);
  padding-inline: var(--size-4);
  right: 0;
  text-decoration: none;
  width: 100%;
}

.skip-link:hover {
  color: var(--white);
  text-decoration: underline;
}

.skip-link::after {
  content: "\0020	➔";
  -webkit-padding-start: var(--size-2);
  padding-inline-start: var(--size-2);
}

/* Since the link is hidden by default, adding a parent selector here to be able
to see it in Patternlab. */

.skip-link.focusable:focus,
.pl .skip-link {
  height: 40px;
  outline: none;
  position: sticky;
  width: 100%;
  z-index: var(--layer-50);
}