@use 'sass:math' as math;
@use "../variables" as vars;
@use "../functions" as func;
@use "../mixins" as mixins;

a.skipnav {
  color: func.color(vars.$skipnav-text-color);
  left: 0;
  padding: 1rem 1.5rem;
  position: absolute;
  top: -4.2rem;
  transition: all 0.2s ease-in-out;
  z-index: vars.$zindex-skip;
  max-width: none;
  outline-offset: 0;
  border-radius: func.border-radius('medium');

  &:focus {      
    @include mixins.focus-outline;
    background-color: func.color(vars.$skipnav-background-color);
    left: 0;
    position: absolute;
    top: 0;
    transition: all 0.2s ease-in-out;
    padding: 1rem math.div(math.div(vars.$grid-gutter-width, 2), 2);
    margin-top: calc(#{func.units(4)} - 1px);
    margin-left: math.div(math.div(vars.$grid-gutter-width, 2), 2);
  }
}

#main-content:focus{
  @include mixins.focus-outline;
}