@layer components {
  .heading {
    position: relative;

    &:has(+ ul) {
      @mixin my var(--spacing-comfortable);
    }
  }

  .mainlink {
    position: relative;

    border: none;

    font-family: var(--title-font);
    font-size: var(--title-font-size);
    font-weight: var(--title-font-weight);
    line-height: var(--title-line-height);
    color: var(--title-color);
    text-transform: var(--title-transform);
    letter-spacing: var(--title-spacing);

    background: transparent;

    transition: var(--title-transition);

    &.current {
      padding: var(--spacing-snug) var(--spacing-tight);
      color: var(--title-current-fg);
      animation: var(--kf-text-glitch) 5s infinite;

      &::before {
        content: "⟩";
      }
    }

    &:not(.current) {
      --pointer-left-symbol: "▶";
      --pointer-right-symbol: "◀";
      --pointer-distance: 1em;

      @mixin anim-txt-pointer_focus;
      @mixin px var(--spacing-tight);

      &:focus {
        color: var(--title-focus-fg);
        outline: none;
      }

      &:not(:focus) {
        --pointer-left-symbol: "{";
        --pointer-right-symbol: "}";
        --pointer-distance: 0.5em;

        @mixin anim-txt-pointer;

        &:hover {
          --title-color: var(--color-primary);
        }
      }
    }
  }
}