/* The help button of a view (components/help/helpbutton.ts): in the top right slot of the view's
   header, or floating in the top right corner of a view without one. */
.na-help-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--na-text-muted, #6b7585);
    line-height: 1;
}

.na-help-button:hover {
    background: var(--cui-tertiary-bg, #f8f9fb);
    color: var(--cui-primary, #0d6efd);
}

.na-help-button:focus-visible {
    outline: 2px solid var(--cui-primary, #0d6efd);
    outline-offset: 2px;
}

/* Above the page, under CoreUI's dialogs and offcanvas panels. */
.na-help-button-floating {
    position: absolute;
    top: .6rem;
    right: 1.25rem;
    z-index: 1030;
    border: 1px solid var(--cui-border-color, #d8dbe0);
    background: var(--cui-card-bg, var(--cui-body-bg, #fff));
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.na-help-button-floating:hover {
    background: var(--cui-card-bg, var(--cui-body-bg, #fff));
    border-color: var(--cui-primary, #0d6efd);
}

/* The page itself: its content column scrolls, so the button holds on to the window instead. */
.na-help-button-host-page > .na-help-button-floating {
    position: fixed;
}