/* todo rename to NoteEditorStickyFooter */
.NoteEditorToolbar_container {
    display: flex;
    justify-content: end;
    justify-items: end;
    align-items: end;
    flex-wrap: wrap;
    flex-shrink: 0;
    position: sticky;
    text-align: right;
    pointer-events: none;
    bottom: 5px;
    margin: -45px 5px 5px 5px !important;
}

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

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

@keyframes NoteEditorToolbar_revealLeft {
    from { --NoteEditorToolbar_maskLeft: 0px; }
    to   { --NoteEditorToolbar_maskLeft: 24px; }
}

@keyframes NoteEditorToolbar_hideRight {
    from { --NoteEditorToolbar_maskRight: 24px; }
    to   { --NoteEditorToolbar_maskRight: 0px; }
}

.NoteEditorToolbar_scrollable {
    overflow: hidden;
}

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

    @media (prefers-color-scheme: light) {
        background: #FFFFFFEF;
    }
    @media (prefers-color-scheme: dark) {
        background: #35373BEF;
    }
}

.NoteEditorToolbar_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(--NoteEditorToolbar_maskLeft), black calc(100% - var(--NoteEditorToolbar_maskRight)), transparent);
    mask-image: linear-gradient(to right, transparent, black var(--NoteEditorToolbar_maskLeft), black calc(100% - var(--NoteEditorToolbar_maskRight)), transparent);
    animation: NoteEditorToolbar_revealLeft linear both, NoteEditorToolbar_hideRight linear both;
    animation-timeline: scroll(inline self), scroll(inline self);
    animation-range: 0px 1px, calc(100% - 1px) 100%;
}

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

.NoteEditorToolbar_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 */
}

.NoteEditorToolbar_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(--NoteEditorToolbar_maskLeft), black calc(100% - var(--NoteEditorToolbar_maskRight)), transparent);
    mask-image: linear-gradient(to right, transparent, black var(--NoteEditorToolbar_maskLeft), black calc(100% - var(--NoteEditorToolbar_maskRight)), transparent);
    animation: NoteEditorToolbar_revealLeft linear both, NoteEditorToolbar_hideRight linear both;
    animation-timeline: scroll(inline self), scroll(inline self);
    animation-range: 0px 1px, calc(100% - 1px) 100%;
}

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

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

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

.NoteEditorToolbar_button *, .NoteEditorToolbar_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 NoteEditorToolbar_zoomInZoomOutStartEditingButtonAnimation {
    from {
        transform: scale(100%);
    }
    50% {
        transform: scale(800%);
    }
    to {
        transform: scale(100%);
    }
}

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

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

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

.NoteEditorToolbar_star.active,
.NoteEditorToolbar_pin.active,
._ {
    color: orangered !important;
}

.NoteEditorToolbar_Hide.active,
.NoteEditorToolbar_Delete.active,
.NoteEditorToolbar_Lock.active,
._ {
    color: #337ab7 !important;
}