@use "../../../styles/tokens/color";
@use "../../../styles/tokens/space";

@layer components {
  .skip-link {
    padding: space.get("xsmall") space.get("small");
    background: var(--color-surface-secondary);
    color: var(--text-default);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 12;
    transform: translateY(-100%);
    transition: transform 0.2s ease-out;
  }

  .skip-link:focus {
    transform: none;
  }
}