@use "../../palette";
@use "../../typography";

.skip-link {
  @extend %anchor;

  font-size: 14px;
  line-height: 16px;

  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  display: block;
  padding: 10px 15px;
  outline-offset: 0;

  &:focus,
  &:active {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    margin: 3px;
  }

  &:active {
    outline: 3px solid palette.$white;
    background-color: palette.$layout-edge;
    color: palette.$white;
  }
}