.side-panel__screen {
  @apply bg-primary-500 opacity-50;

  display: none;

  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2000;
}

.side-panel__modal {
  position: fixed;
  width: 100vw;
  background-color: white;
  z-index: 2000;
  display: none;
  opacity: 0;
  animation: fade-in 0.1s cubic-bezier(0.6, -0.28, 0.735, 0.045) .1s forwards,
            slide-in-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) .1s forwards;

  height: calc(100vh - var(--spacing) * 12);

  @apply top-6 md:right-6 md:w-md lg:w-lg max-w-screen-md rounded-xl overflow-hidden shadow-2xl shadow-primary-900/50 border border-primary-500;

  main {
    overflow-y: auto;
    height: calc(100% - var(--spacing) * 12);
  }
}

.side-panel--open {
  .side-panel__modal {
    display: block;
  }

  .side-panel__screen {
    display: block;
  }
}

.side-panel-modal__header {
  @apply sticky top-0 left-0 w-full bg-white font-semibold text-xl px-4 py-3 border-b border-primary-200;
}