button.qon-suggestion {
    border-left: 3px solid #2f855a;
    align-items: flex-start;
    text-align: left;
}

button.qon-suggestion span {
    color: #2f855a;
}

/* Extra bottom padding on the <li> makes room for the URL hint div. */
li.qon-li-has-url {
    position: relative;
    padding-bottom: 1.45rem;
}

/* The URL hint div is appended to the <li> by custom.js and sits below the
   button text. It is attached to the <li> (not the <button>) so that it
   survives React replacing the button node when the item becomes active. */
li.qon-li-has-url .qon-url-hint {
    position: absolute;
    left: 1rem;
    right: 8.5rem;
    bottom: 0.25rem;
    font-size: 0.72em;
    line-height: 1.2;
    color: rgba(47, 133, 90, 0.82);
    opacity: 0.95;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

html.qon-keyboard-nav div[role="dialog"] dialog ul li > button {
    pointer-events: none;
}
