@use '../functions';
@use '../utilities/visually-hidden';

.skip-link:not(:focus) {
  @extend %visually-hidden;
}

.skip-link:focus {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  padding: functions.get-size(300) functions.get-size(500) functions.get-size('base') functions.get-size(500);
  background-color: var(--color-action-bg);
  color: var(--color-action-text);
  line-height: 1;
  text-decoration: none;
  font-weight: 700;
}