.nav-link {
  font: var(--type-controls-nav-l);

  display: block;
  padding-block: var(--spacing-controls-nav-y-l);
  padding-inline: var(--spacing-controls-nav-x-l);

  text-decoration: none;
  color: var(--color-controls-nav-text-default);

  transition: color var(--transition-duration) var(--transition-easing);
}

.nav-link__line {
  display: block;
  overflow: hidden;
  overflow: clip;
}

.nav-link__label {
  display: block;
  position: relative;
  overflow-wrap: anywhere;
  transform-origin: left top;
  transition: transform var(--transition-duration) var(--transition-easing);
}

.nav-link__label::after {
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute;
  top: 100%;
  left: 0;
  transform-origin: left top;
  transform: skewY(6deg);
}

.nav-link:active {
  color: var(--color-controls-nav-text-pressed);
  transition-duration: 0s;
}

.nav-link:focus-visible .nav-link__label {
  transform: translateY(-100%) skewY(-6deg);
}

@media (hover: hover) {
  .nav-link:hover:not(:active) {
    color: var(--color-controls-nav-text-hover);
  }

  .nav-link:hover .nav-link__label {
    transform: translateY(-100%) skewY(-6deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-link:focus-visible .nav-link__label,
  .nav-link:hover .nav-link__label {
    transform: none;
  }

  .nav-link__label::after {
    display: none;
  }
}