@layer components {
  .skip-to-content {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-dark-violet);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 700;
    text-decoration: none;

    &:focus {
      left: var(--spacing-sm);
      top: var(--spacing-sm);
    }
  }
}