<li class="settings-list-item"> <a :href> {{#if icon}} <svg class="settings-list-item-svg"> <use xlink:href="{{icon}}" /> </svg> {{/if}} {{#if ariaLabel}} <span aria-label="{{ariaLabel}}" class="{{offsetForIcon ? 'offset-for-icon' : ''}}"> {{label}} </span> {{else}} <span class="{{offsetForIcon ? 'offset-for-icon' : ''}}"> {{label}} </span> {{/if}} </a> </li> <style> .settings-list-item { border: 1px solid var(--settings-list-item-border); font-size: 1.3em; display: flex; flex-direction: column; } .settings-list-item a { display: flex; padding: 20px 40px; background: var(--settings-list-item-bg); } .settings-list-item a, .settings-list-item a:visited { color: var(--settings-list-item-text); } .settings-list-item a:hover { text-decoration: none; background: var(--settings-list-item-bg-hover); color: var(--settings-list-item-text-hover); } .settings-list-item a:active { background: var(--settings-list-item-bg-active); } .settings-list-item-svg { width: 24px; height: 24px; display: inline-block; margin-right: 20px; fill: var(--svg-fill); } .settings-list-item .offset-for-icon { margin-left: 44px; } .settings-list-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 767px) { .settings-list-item a { padding: 20px 10px; } .settings-list-item-svg { margin-right: 10px; } .settings-list-item .offset-for-icon { margin-left: 34px; } } </style>