<a class='main-nav-link {{page === name ? "selected" : ""}}' aria-label='{{page === name ? `${label} (current page)` : label}}' aria-current="{{page === name}}" href='{{href}}'> <svg> <use xlink:href="{{svg}}" /> </svg> <span>{{label}}</span> </a> <style> .main-nav-link { border-bottom: 1px solid var(--nav-a-border); text-decoration: none; padding: 25px 20px; display: flex; justify-content: center; align-items: center; } .main-nav-link.selected { border-bottom: 1px solid var(--nav-a-selected-border); background: var(--nav-a-selected-bg); } .main-nav-link.selected:hover { border-bottom: 1px solid var(--nav-a-selected-border-hover); background: var(--nav-a-selected-bg-hover); } .main-nav-link:hover { background-color: var(--nav-a-bg-hover); border-bottom: 1px solid var(--nav-a-border-hover); } .main-nav-link:hover span { color: var(--nav-text-color-hover); } .main-nav-link:hover svg { fill: var(--nav-svg-fill-hover); } .main-nav-link svg { width: 20px; height: 20px; display: inline-block; fill: var(--nav-svg-fill); } .main-nav-link span { font-size: 16px; color: var(--nav-text-color); padding-left: 10px; } @media (max-width: 767px) { .main-nav-link span { display: none; } .main-nav-link svg { width: 25px; height: 25px; } } </style> <script> </script>