﻿.inspector {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  transition: transform 320ms cubic-bezier(.2,.9,.25,1.15), opacity 260ms ease-out, box-shadow 260ms ease-out, visibility 0s;
}
.app.no-panel .inspector {
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: 0 0 0 transparent;
  transition: transform 200ms ease-in, opacity 200ms ease-in, box-shadow 200ms ease-in, visibility 0s linear 200ms;
}
.app.panel-boot .inspector { visibility: hidden; transition: none; }
#panel-btn { transition: background-color 160ms ease, color 160ms ease, transform 160ms ease; }
#panel-btn:active { transform: scale(.94); }
#panel-btn[aria-pressed="true"] { background-color: #393247; color: var(--c-text); }
.panel-opening #inspector-body > .p-sec {
  animation: panel-section-in 260ms ease-out both;
}
.panel-opening #inspector-body > .p-sec:nth-child(2) { animation-delay: 35ms; }
.panel-opening #inspector-body > .p-sec:nth-child(3) { animation-delay: 70ms; }
.panel-opening #inspector-body > .p-sec:nth-child(4) { animation-delay: 105ms; }
.panel-opening #inspector-body > .p-sec:nth-child(5) { animation-delay: 140ms; }
.panel-opening #inspector-body > .p-sec:nth-child(6) { animation-delay: 175ms; }
.panel-opening #inspector-body > .p-sec:nth-child(7) { animation-delay: 210ms; }
.panel-opening #inspector-body > .p-sec:nth-child(n+8) { animation-delay: 245ms; }
@keyframes panel-section-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 900px), (orientation: portrait) and (max-width: 1200px) {
  .inspector { transform: translateY(0); }
  .app.no-panel .inspector { transform: translateY(100%); }
  .panel-opening .sheet-grab { animation: panel-grab-in 300ms 100ms ease-out both; }
  @keyframes panel-grab-in {
    from { opacity: 0; transform: scale(.7); }
    to { opacity: 1; transform: scale(1); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .inspector, .app.no-panel .inspector { transform: none; transition: opacity 100ms linear, visibility 0s linear 100ms; }
  .inspector { transition-delay: 0s; }
  .panel-opening #inspector-body > .p-sec, .panel-opening .sheet-grab { animation: none; }
  #panel-btn { transition: none; }
}
