/**
* @prop --ic-skip-link-position-top: The top position of the skip link when it is not displayed inline and has an absolute position.
*/

:host {
  display: block;
}

ic-link {
  position: absolute;
  left: -9999px;
}

ic-link:focus {
  z-index: var(--ic-z-index-skip-link);
  left: var(--ic-space-sm);
  padding: var(--ic-space-sm);
  box-shadow: var(--ic-border-focus);
  border-radius: var(--ic-border-radius);
  width: -moz-fit-content;
  width: fit-content;
}

.display-top:focus {
  top: var(--ic-skip-link-position-top, var(--ic-space-sm));
}

.inline:focus {
  position: static;
  display: inline-block;
  margin: var(--ic-space-xs) 0;
}

.full-width:focus {
  display: flex;
  right: var(--ic-space-sm);
  width: auto;
}

.inline.full-width:focus {
  justify-content: start;
}

.show-background {
  background: var(--ic-skip-link-background);
}