@layer components {
  .list {
    @media screen and (--bp-tablet-down) {
      @util hide-visually;
    }
  }

  .item {
    position: relative;
  }

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

    &.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(--sublink-focus-fg);
        outline: none;
      }

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

        @mixin anim-txt-pointer;

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