@layer ds_components {
  .comp-skiplink {
    position: fixed;
    left: -100vmin;
    top: -100vmin;
    z-index: 200;
    padding: 1rem;
    transform: translateY(-200%);
    background-color: var(--ds-component-skiplink-color-background);
    color: var(--ds-component-skiplink-color-content);
    outline: var(--ds-component-skiplink-outline-width) solid
      var(--ds-component-skiplink-color-outline);
    border-radius: var(--ds-component-skiplink-radius);
    padding-inline: var(--ds-component-skiplink-padding-inline);
    padding-block: var(--ds-component-skiplink-padding-block);
    text-decoration: none;
    white-space: nowrap;

    &:focus {
      left: 50%;
      top: 5vmin;
      transform: translate(-50%, 0);
    }
  }
} /* @layer ds_components */