@import "settings.colors";
@import "settings.z-index";

@import "mixins/tools.mixins";
@import "mixins/base.focus";

// Skip links are absolutely positioned, but know nothing about their
// parent container or it's position on the page. So, it's up to developers
// to make sure the parent container has "position: relative", or whatever
// the case may be, for their given scenario.

.c-skip-link {
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  position: absolute;
  z-index: $z-index-skip-link;
  padding: rem(10);
  background-color: $color-grey-900;
  color: $color-white;
  &:focus,
  &:active {
    height: auto;
    clip: auto;
    overflow: visible;
  }
}
.c-skip-link--inverted-outline {
  &:focus,
  &:hover:focus {
    @include focus-outline-inverted;
  }
}
// It's assumed that the "primary" skip link will be
// positioned in the top left corner of the viewport
.c-skip-link--primary {
  top: rem(10);
  left: rem(10);
}
// "Bypass block" skip links
.c-skip-link--bypass--start {
  top: 0;
  left: 0;
}
.c-skip-link--bypass--end {
  bottom: 0;
  left: 0;
}
