// Component: Skiplinks
// Used for accessible skiplinks at the beginning of the page.

@use '00-config' as *;

.c-skiplinks {
  display: flex;
  font-family: gesso-font-family(system);
  justify-content: center;
  position: absolute;
  width: 100%;
  z-index: 9999;
}

.c-skiplinks__link,
.c-skiplinks__link:visited,
.c-skiplinks__link:hover,
.c-skiplinks__link:focus {
  background-color: gesso-color(ui, generic, background-dark);
  border: 2px solid gesso-color(ui, generic, border-light);
  border-block-start: 0;
  border-end-end-radius: 5px;
  border-end-start-radius: 5px;
  box-shadow: gesso-box-shadow(2);
  color: gesso-color(text, on-dark);
  display: inline-block;
  font-weight: bold;
  line-height: gesso-line-height(short);
  margin: 0;
  outline: 0;
  padding: rem(gesso-spacing(2));
  text-align: center;
  text-decoration: none;
}

// Remove :focus styles for skiplink targets.
// stylelint-disable-next-line selector-max-id
#main:focus {
  outline: 0;
}
