@use 'sass:map';
@use '../../global/scss/tools' as nsw;

.nsw-skip {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

  a {
    background-color: var(--nsw-brand-dark);
    color: var(--nsw-white);
    width: 100%;
    text-decoration: none;
    padding: nsw.rem(8px) nsw.rem(16px);
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-101%);

    @include nsw.z-index('middle');
    @include nsw.font-size('xxs');
    
    &:focus {
      transform: translateY(0);
      outline: none;

      span {
        @include nsw.nsw-focus($color: var(--nsw-white));
      }
    }

    @include nsw.breakpoint('lg') {
      text-align: left;
    }
  }

  &--light {
    a {
      background-color: var(--nsw-off-white);
      color: var(--nsw-text-dark);

      &:focus span {
        @include nsw.nsw-focus();
      }
    }
  }
}

.nsw-masthead {
  padding: nsw.rem(8px) 0;
  background-color: var(--nsw-brand-dark);
  color: var(--nsw-white);

  @include nsw.font-size('xxs');

  &--light {
    background-color: var(--nsw-off-white);
    color: var(--nsw-text-dark);
  }
}