.sidebar {
    position: absolute;
    left: -54px;
    top: 0px;
    width: 54px;
    height: 100%;
    background-color: var(--primary-bg-color);
    color: #cececb;
    font-weight: 100;
    z-index: 4;
    transition: all 200ms linear;
    scrollbar-width: thin;
}

.sidebar.open {
    box-shadow: 0 0 2px 1px var(--primary-fg-color);
    left: 0px;
}

.sidebar.editActive {
    background-color: var(--secondary-fg-color);
    color: var(--primary-bg-color);
    box-shadow: none;
    border-right: 1px solid var(--secondary-bg-color);
}

.viewmodeControls button.editMode {
    display: block;
    position: relative;
    width: auto;
    max-width: 55px;
    padding: 0px 6px 0px 4px;
    background-color: transparent;
    border-top: 1px solid transparent;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid transparent;
    color: var(--primary-bg-color);
    opacity: .7;
    white-space: nowrap;
    overflow: hidden;
}

.viewmodeControls button.editMode .editModeLabel {
    display: none;
    padding: 4px 10px 4px 0;
    border-radius: 0 20px 20px 0;
    background: var(--secondary-fg-color);
    border-top: 1px solid var(--secondary-bg-color);
    border-bottom: 1px solid var(--secondary-bg-color);
    border-right: 1px solid var(--secondary-bg-color);
}

.viewmodeControls button.editMode .editModeLabel [class^="icon-"]::before, .viewmodeControls button.editMode .editModeLabel [class*=" icon-"]::before {
    padding: 0px;
    margin: 0px;
}


.viewmodeControls button.editMode:hover {
    max-width: 250px;
    opacity: 1;
}

.viewmodeControls button.editMode:hover .editModeLabel {
    display: inline-block;
}

.sidebarContainer .viewmodeControls button.editMode  {
    display: none;
}

.sidebarContainer .viewmodeControls button.editMode.inEditMode  {
    display: block;
}

.sidebarContainer .viewmodeControls button.editMode.disabled  {
    pointer-events: none;
    opacity: .4;
}

.sidebarContainer .viewmodeControls button.editMode.unsavedChanges:before {
    content: "*";
    position: absolute;
    top: 0px;
    left: 42px;
    color: #FF9900;
    font-weight: bold;
    font-size: 20px;
}

.viewmodeControls button.editMode.active {
    background-color: var(--primary-fg-color);
    color: var(--primary-bg-color);
    border-color: var(--secondary-bg-color);
    opacity: 1;
    pointer-events: none;
}

.viewmodeControls button.editMode.active:after {
    content: "";
    position: absolute;
    top: 0px;
    right: -2px;
    width: 2px;
    height: 100%;
    background: var(--primary-fg-color);
}

.viewmodeControls button.editMode [class^="icon-"]::before, .viewmodeControls button.editMode [class*=" icon-"]::before {
    font-size: 19px;
    margin: 0 14px 0 10px;
    width: 26px;
    padding: 10px 0;
}

.viewmodeControls button.editMode[data-editmode="annotations"] .icon-annotations::before {
    transform: scale(1.34);
}

.sidebarContainer {
    display: block;
    margin-top: 40px;
}

.sidebarContainer > div {
    display: none;
}

.sidebarContainer > div.active {
    display: block;
}

.sidebarContainer .viewmodeControls {
    position: relative;
    width: 100%;
}

/* Collaboration status (lock notice / refresh affordance)
   The sidebar is a fixed 54px icon rail, so a text banner cannot sit inside it.
   Anchor the panel just clear of the rail instead — the same expand-to-the-right
   idiom the edit-mode labels already use on hover. :not(:empty) keeps it out of
   the layout entirely when there is nothing to say, which is the usual case. */
.sidebarContainer .viewmodeControls .collaborationInfo {
    display: none;
}

.sidebar.editActive .sidebarContainer .viewmodeControls .collaborationInfo:not(:empty) {
    display: block;
    position: absolute;
    left: 54px;
    top: 0;
    width: 230px;
    padding: 8px 8px 4px 8px;
    background: var(--primary-fg-color);
    border: 1px solid var(--secondary-bg-color);
    border-left: none;
    border-radius: 0 4px 4px 0;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, .25);
    z-index: 6;
}

.sidebarContainer .viewmodeControls .collaborationInfo .message {
    margin-bottom: 6px;
}

.sidebarContainer .viewmodeControls .collaborationInfo button {
    display: block;
    width: 100%;
    margin-bottom: 4px;
    text-align: center;
    cursor: pointer;
}

.sidebarContainer .viewmodeControls .viewModeActionButtonContainer {
    padding: 0 0px 8px 0px;
    border-bottom: 1px solid #bbbbbb;
    border-top: 1px solid #bbbbbb;
    margin: 0 7px 8px 7px;
}

.sidebarContainer .viewmodeControls .viewModeActionButtonContainer button {
    float: left;
    height: 40px;
    margin-top: 7px;
    width: 40px;
    padding: 4px 6px;
    border: 2px solid #F8F8F8;
    border-radius: 50%;
    background-color: transparent;
}

.sidebarContainer .viewmodeControls .viewModeActionButtonContainer button:hover {
    background-color: var(--primary-bg-color);
}

.sidebar.editActive .sidebarContainer .viewmodeControls .viewModeActionButtonContainer button {
    border-color: var(--primary-bg-color);
}

.sidebarContainer .viewmodeControls .viewModeActionButtonContainer button.unsavedChanges {
    border-color: #FF9900 !important;
    background-color: rgba(255, 153, 0, .15);
    color: var(--primary-bg-color);
}

.sidebarContainer .viewmodeControls .viewModeActionButtonContainer button [class^="icon-"]::before, .sidebarContainer .viewmodeControls .viewModeActionButtonContainer button [class*=" icon-"]::before {
    font-size: 20px;
    margin-left: 2px;
    margin-top: 2px;
}

.sidebarContainer .viewmodeControls .exportButton {
    display: none;
}

/* Edit modes locked by another editor
   A lock badge only — no dimming. These buttons sit in a rail of icons that
   already vary in opacity by state, so fading them read as a glitch rather
   than as a lock. The blocking sheet over the player carries the message; this
   is just the cue for which modes it will appear in.

   :before, not :after — :after on these buttons is the active-mode edge marker
   (.editMode.active:after above), and .active + .collabLocked co-occur the
   moment you enter a locked mode, so a lock badge there would erase it.
   :before is the unsaved-changes asterisk, which genuinely cannot co-occur:
   you cannot have unsaved changes in a mode you were never able to edit. */
.viewmodeControls button.editMode.collabLocked:before {
    content: "\e81a";   /* icon-lock */
    font-family: "FrameTrail";
    position: absolute;
    top: 2px;
    left: 42px;
    font-size: 11px;
    color: var(--primary-bg-color);
}