/**
 * @fileoverview Skip Link component styles
 *
 * Styles for the skip link component that is visually hidden
 * but becomes visible when focused.
 */

/* Skip link - visually hidden by default */
.wn-skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: var(--wn-z-skip);
  padding: var(--wn-space-4) var(--wn-space-5);
  background-color: var(--wn-brand-500);
  color: white;
  font-size: var(--wn-font-base);
  font-weight: 500;
  text-decoration: none;
  border-radius: 0 0 var(--wn-radius-md) 0;
  transition: top var(--wn-transition-fast) ease-in-out;
}

/* Skip link - visible on focus */
.wn-skip-link:focus {
  top: 0;
  outline: 2px solid var(--wn-brand-400);
  outline-offset: 2px;
}

/* Skip link - hover state */
.wn-skip-link:hover {
  background-color: var(--wn-brand-600);
}

/* Light mode overrides */
.wn-light .wn-skip-link {
  background-color: var(--wn-brand-500);
  color: white;
}

.wn-light .wn-skip-link:focus {
  outline-color: var(--wn-brand-500);
}

/* Reduced motion - disable transition */
@media (prefers-reduced-motion: reduce) {
  .wn-skip-link {
    transition: none;
  }
}