@use "../../variables/a11y" as a11yVars;
@use "../../tools/a11y";
@use "../../tools/colour";
@use "../../tools/media";
@use "../../tools/spacing";
@use "../../tools/typography";
@use "../../components/button/button" as button;

.tna-skip-link {
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;

  display: block !important;

  overflow: hidden !important;

  position: absolute !important;
  top: -100vh !important;
  left: -100vw !important;

  white-space: nowrap !important;

  background-color: colour.brand-colour("yellow");

  border: a11yVars.$focus-outline-outer-width colour.brand-colour("black") solid;

  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;

  &,
  &:link,
  &:visited {
    color: colour.brand-colour("black");
  }

  &:active,
  &:focus {
    width: auto !important;
    height: auto !important;
    margin: inherit !important;
    padding: spacing.space(1) spacing.space(1.5) !important;

    overflow: visible !important;

    position: static !important;

    white-space: inherit !important;

    outline: none !important;

    box-shadow: inset 0 0 0 a11yVars.$focus-outline-inner-width #fff !important;

    -webkit-clip-path: none !important;
    clip-path: none !important;
  }

  &::after {
    content: "\203A";
    content: "\203A" / "";
  }
}