/* --- UTILITY --- */
@import "10_utility";

/**
  * 20_components.css
  *
  * INDEX
  * -----
  *
  * Hidden Link..........Jump to Content
  *
  * Notes: 
  * Self contained, not dependent of the design system
  * Naming prefix: .ptt-c-
  *
  */

/* ==========================================================================
   Components
   ========================================================================== */

/** 
  * HIDDEN LINK
  * allows screen reader and keyboard users 
  * to skip navigation and jump to content
  *
  * More: https://www.accessguide.io/guide/skip-link
  */

/* <a class="ptt-c-hidden-link" href="#start">Jump to Content</a> */

.ptt-c-hidden-link {
  width: 1px;
  height: 1px;
  overflow: hidden;

  position: absolute;
  top: auto;

  transform: translateY(-120%);
}

.ptt-c-hidden-link:active,
.ptt-c-hidden-link:focus {
  width: auto;
  height: auto;

  position: relative;
  left: auto;
}