<template>
  <a
    class="layout-skip-link"
    href="#main"
  >{{ $t('skip_to_content') }}</a>
</template>

<style lang="scss">
.layout-skip-link {
  @include font-sm;

  position: absolute;
  top: 8px;
  left: 8px;
  z-index: $z-index-skip-link;
  padding: 4px 8px;
  background-color: $layout-skip-link-bg;
  color: $layout-skip-link-text;
  border-radius: $radius;
  transform: translateY(calc(-100% - 8px));
  transition: var(--transition) transform;

  &:focus-visible {
    transform: translateY(0);
  }
}
</style>
