//
// Sidebar
//

.tox-sidebar when (@custom-properties-enabled = true) {
  --tox-private-sidebar-background-color: light-dark(hsl( from var(--tox-private-background-color) h s calc(l - 6)), hsl( from var(--tox-private-background-color) h s calc(l + 10)));
}

@sidebar-background-color: contrast(@background-color, darken(@background-color, 6%), lighten(@background-color, 10%));

.tox {
  .tox-sidebar-wrap {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    // TC-310: Without the min-height setting, browsers like Firefox default to
    // min-height: auto, and the sidebar-wrap will grow in height as soon
    // as the sidebar contents does. This happens even if the sidebar contents has
    // overflow: auto.
    min-height: 0;
  }

  .tox-sidebar {
    background-color: var(--tox-private-sidebar-background-color, @sidebar-background-color);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }

  .tox-sidebar__slider {
    display: flex;
    overflow: hidden;
  }

  .tox-sidebar__pane-container {
    display: flex;
  }

  .tox-sidebar__pane {
    display: flex;
  }

  .tox-sidebar--sliding-closed {
    opacity: 0;
  }

  .tox-sidebar--sliding-open {
    opacity: 1;
  }

  .tox-sidebar--sliding-growing,
  .tox-sidebar--sliding-shrinking {
    transition: width .5s ease, opacity .5s ease;
  }
}