/* === Pane bar animation === */

/* Prevent animation on page load */
body.no-animations * {
  animation-duration: 0s !important;
}

.pane {
  transition:
    flex-basis 360ms cubic-bezier(0.33, 1, 0.68, 1),
    flex-grow 360ms cubic-bezier(0.33, 1, 0.68, 1),
    width 360ms cubic-bezier(0.33, 1, 0.68, 1),
    min-width 360ms cubic-bezier(0.33, 1, 0.68, 1),
    max-width 360ms cubic-bezier(0.33, 1, 0.68, 1),
    box-shadow 320ms ease,
    transform 320ms ease;

  /* Desktop */
  @media (min-width: 768px) {
    &.tools:not(.active) .pane-bar {
      overflow-y: auto;

      > * {
        visibility: hidden; /* Start hidden, the `bar-appear` animation with fill mode `forwards` makes visible. (prevent glitching) */
        animation:
          bar-slide-in 200ms ease-out,
          bar-appear 200ms forwards ease-out;
      }
    }
    &.tools.active .pane-bar {
      pointer-events: none;

      > * {
        animation: bar-slide-out 200ms forwards ease-in;
      }
    }
  }

  .pane-content {
    transition: 400ms;
  }
  &.active .pane-content {
    opacity: 1;
  }
  &:not(.active) {
    .pane-content,
    .tool-show {
      opacity: 0;
      pointer-events: none;
    }
  }
}

@keyframes bar-slide-in {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes bar-appear {
  from {
    visibility: hidden;
  }
  to {
    visibility: visible;
  }
}
@keyframes bar-slide-out {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-110%);
    visibility: hidden;
  }
}