:root[data-section-transition="active"] {
  view-transition-name: none;
  --section-slide-direction: 1;
  --section-slide-distance: 14px;
  --section-slide-duration: 180ms;
  --section-slide-hidden-opacity: 0;
}

:root[data-section-direction="backward"] {
  --section-slide-direction: -1;
}

:root[data-section-transition="active"] #content {
  view-transition-name: workspace-section
}

::view-transition {
  pointer-events: none
}

::view-transition-group(workspace-section) {
  animation-duration: var(--section-slide-duration, 180ms);
  overflow: clip
}

::view-transition-old(workspace-section),
::view-transition-new(workspace-section) {
  height: 100%;
  mix-blend-mode: normal;
  animation-duration: var(--section-slide-duration, 180ms);
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  animation-fill-mode: both
}

::view-transition-old(workspace-section) {
  animation-name: section-old-view
}

::view-transition-new(workspace-section) {
  animation-name: section-new-view
}

@keyframes section-old-view {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: var(--section-slide-hidden-opacity);
    transform: translateX(calc(-1 * var(--section-slide-distance) * var(--section-slide-direction)));
  }
}

@keyframes section-new-view {
  from {
    opacity: var(--section-slide-hidden-opacity);
    transform: translateX(calc(var(--section-slide-distance) * var(--section-slide-direction)));
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

:root[data-section-effect="workspace"] {
  --section-slide-distance: 100%;
  --section-slide-duration: 520ms;
  --section-slide-hidden-opacity: 1;
}

.settings-modal {
  --settings-enter-shift: 16px;
  animation: settings-enter 400ms cubic-bezier(.4, 0, .2, 1)
}

.settings-panel:not(.hidden) {
  animation: settings-panel-enter 330ms cubic-bezier(.4, 0, .2, 1)
}

@keyframes settings-enter {
  from {
    opacity: 0;
    transform: translateY(var(--settings-enter-shift))
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes settings-panel-enter {
  from {
    opacity: 0;
    transform: translateX(18px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

@media(max-width:760px) {
  .settings-modal {
    --settings-enter-shift: 8px
  }
}