:root {
    --NoteViewToolbar_margin: var(--NoteView_padding);
    /*--NoteViewToolbar_margin: 0;*/
}

/* todo rename to NoteViewStickyFooter */
.NoteViewToolbar_container {
    display: flex;
    justify-content: end;
    justify-items: end;
    align-items: end;
    flex-wrap: wrap;
    flex-shrink: 0;
    gap: 5px;
    position: sticky;
    text-align: right;
    pointer-events: none;
    bottom: 0;
    /*margin-top: calc(-40px - var(--NoteViewToolbar_margin)) !important;*/
    margin-right: var(--NoteViewToolbar_margin) !important;
    margin-left: var(--NoteViewToolbar_margin) !important;
    margin-bottom: 5px !important;
    padding-bottom: var(--NoteViewToolbar_margin);
    padding-top: var(--NoteViewToolbar_margin);
}

@property --NoteViewToolbar_maskLeft {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
}

@property --NoteViewToolbar_maskRight {
    syntax: '<length>';
    initial-value: 24px;
    inherits: false;
}

@keyframes NoteViewToolbar_revealLeft {
    from { --NoteViewToolbar_maskLeft: 0px; }
    to   { --NoteViewToolbar_maskLeft: 24px; }
}

@keyframes NoteViewToolbar_hideRight {
    from { --NoteViewToolbar_maskRight: 24px; }
    to   { --NoteViewToolbar_maskRight: 0px; }
}

.NoteViewToolbar_scrollable {
    overflow: hidden;
}

.NoteViewToolbar {
    pointer-events: all;
    box-sizing: content-box;
    display: inline-block;
    max-width: calc(100% - 20px);
    line-height: 32px;
    height: 32px !important;
    /* margin left is 0 to make status icon closer - the so called margin merging */
    margin-top: 5px;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 0;
    border-radius: var(--badgeBorderRadius);
    padding: 10px 10px;

    /* Apple liquid-glass look: lowered alpha + backdrop blur turn the existing
       opaque pill into a frosted-glass surface; layered shadows give it the
       sense of floating above the note (it's already position: sticky in
       NoteViewToolbar_container), and the inset top highlight reads as a
       light-catching glass edge. */
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);

    @media (prefers-color-scheme: light) {
        background: rgba(255, 255, 255, 0.7);
        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.04),
            0 4px 12px rgba(0, 0, 0, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }
    @media (prefers-color-scheme: dark) {
        background: rgba(53, 55, 59, 0.65);
        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.3),
            0 4px 12px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
}

.NoteViewToolbar_scrollableContainer {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    height: 100%;
    padding-bottom: 20px; /* push scrollbar out of visible area, clipped by parent overflow: hidden */
    -webkit-mask-image: linear-gradient(to right, transparent, black var(--NoteViewToolbar_maskLeft), black calc(100% - var(--NoteViewToolbar_maskRight)), transparent);
    mask-image: linear-gradient(to right, transparent, black var(--NoteViewToolbar_maskLeft), black calc(100% - var(--NoteViewToolbar_maskRight)), transparent);
    animation: NoteViewToolbar_revealLeft linear both, NoteViewToolbar_hideRight linear both;
    animation-timeline: scroll(inline self), scroll(inline self);
    animation-range: 0px 1px, calc(100% - 1px) 100%;
}

.NoteViewToolbar_mainToolbar {
    display: flex;
    align-items: center;
}

.NoteViewToolbar_mainScrollableWrapper {
    flex: 1;
    min-width: 0;
    overflow: hidden; /* clips scrollbar pushed down by padding-bottom on the container */
    align-self: stretch; /* gives the wrapper a defined height so height: 100% resolves on the container */
}

.NoteViewToolbar_mainScrollableContainer {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    height: 100%;
    padding-bottom: 20px; /* push scrollbar out of visible area, clipped by parent overflow: hidden */
    -webkit-mask-image: linear-gradient(to right, transparent, black var(--NoteViewToolbar_maskLeft), black calc(100% - var(--NoteViewToolbar_maskRight)), transparent);
    mask-image: linear-gradient(to right, transparent, black var(--NoteViewToolbar_maskLeft), black calc(100% - var(--NoteViewToolbar_maskRight)), transparent);
    animation: NoteViewToolbar_revealLeft linear both, NoteViewToolbar_hideRight linear both;
    animation-timeline: scroll(inline self), scroll(inline self);
    animation-range: 0px 1px, calc(100% - 1px) 100%;
}

.NoteViewToolbar a:not(:hover):not(.active) {
    color: lightgray;
}

.NoteViewToolbar_button {
    display: inline-block;
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    vertical-align: center !important;
    border: none;
    background: transparent;
    padding: 0;
}

.NoteViewToolbar_button img {
    display: inline-block !important;
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    padding: 0;
}

.NoteViewToolbar_button *, .NoteViewToolbar_button *::before {
    display: inline-block !important;
    font-size: 32px !important;
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    vertical-align: baseline !important;
    padding: 0;
}

@keyframes NoteViewToolbar_zoomInZoomOutStartEditingButtonAnimation {
    from {
        transform: scale(100%);
    }
    50% {
        transform: scale(800%);
    }
    to {
        transform: scale(100%);
    }
}

.NoteViewToolbar_zoomInZoomOutStartEditingButtonAnimation {
    animation: NoteViewToolbar_zoomInZoomOutStartEditingButtonAnimation 1s;
    /*filter: brightness(200%) saturate(100) hue-rotate(100deg);*/
}

.NoteViewToolbar_star {
    @media (max-width: 450px) {
        display: none !important;
    }
}

.NoteViewToolbar_remindButton {
    @media (max-width: 400px) {
        display: none !important;
    }
}

.NoteViewToolbar_star.active,
.NoteViewToolbar_pin.active,
._ {
    color: orangered !important;
}

.NoteViewToolbar_Hide.active,
.NoteViewToolbar_Delete.active,
.NoteViewToolbar_Lock.active,
._ {
    color: #337ab7 !important;
}