SU-SWS/decanter

///
/// For providing a link at the top of the page which jumps
/// the user down to an anchor or target at the beginning of the main content.
/// Gives screen readers and keyboard users the same capability of going directly
/// to the main content as sighted, mouse users.
/// of the main content. Learn more at https://webaim.org/techniques/skipnav.
///
/// @name skiplinks
///
/// @group mixin

@mixin skiplinks {
  @media print {
    display: none;
  }

  @include padding(0);
  @include sans;
  background-color: color(bg--reverse);
  color: color(link--reverse);
  font-size: 0.75em;
  font-weight: 400;
  text-decoration: none;
  min-height: 1px;
  position: absolute;
  top: -500px;
  left: 0.8em;
  transition-duration: 0.25s;
  transition-property: top;
  transition-timing-function: ease-in-out;

  &,
  &:hover,
  &:visited {
    @include size(1px);
    color: color(link--reverse);
    overflow: hidden;
    white-space: nowrap;
  }

  &:active,
  &:focus {
    @include padding(0.4em 0.8em);
    @include size(auto);
    color: color(link--reverse);
    border: 1px solid $su-color-cool-grey;
    border-radius: $su-border-radius;
    position: fixed;
    left: 0.8em;
    top: 0.8em;
    z-index: 11222;
  }
}