/* ドロワー型メニュー */
/* Drawer menu */

.side-menu {
  /* ドロワー用スプリング曲線 */
  /* Drawer spring curve */
  --spring: linear(0, 0.0107, 0.0398, 0.0834, 0.138, 0.2003, 0.2677, 0.3379, 0.4089, 0.4791, 0.5471, 0.612, 0.6731, 0.7297, 0.7815, 0.8283, 0.87, 0.9068, 0.9388, 0.9662, 0.9892, 1.0083, 1.0237, 1.0357, 1.0449, 1.0514, 1.0556, 1.058, 1.0587, 1.0581, 1.0563, 1.0538, 1.0506, 1.0469, 1.043, 1.0388, 1.0347, 1.0306, 1.0266, 1.0228, 1.0192, 1.0159, 1.0128, 1.0101, 1.0076, 1.0055, 1.0036, 1.002, 1.0006, 0.9995, 0.9986, 0.9979, 0.9974, 0.997, 0.9967, 0.9966, 0.9966, 0.9966, 0.9967, 0.9968, 0.997, 0.9972, 0.9975, 0.9977, 0.998, 0.9982, 0.9984, 0.9987, 0.9989, 0.9991, 0.9992, 0.9994, 0.9996, 0.9997, 0.9998, 0.9999, 1, 1, 1.0001, 1.0001, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1, 1, 1);

  inset: 0 0 0 auto;
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: 16px;
  width: 440px;
  inline-size: 440px;
  height: 100dvh;
  block-size: 100dvh;
  overflow: visible;
  padding: 16px;
  border-left: 1px solid var(--line);
  background: var(--surface);
  translate: 640px 0;
  transition:
    translate 1s var(--spring),
    display 1s allow-discrete,
    overlay 1s allow-discrete;

  &::backdrop {
    background: var(--backdrop);
    opacity: 0;
    transition: opacity 0.4s;
  }

  /* スプリング時の右端の白い受け */
  /* Right-side surface for spring overshoot */
  &::after {
    position: absolute;
    inset-block: 0;
    right: -128px;
    inline-size: 128px;
    background: var(--surface);
    content: "";
    pointer-events: none;
  }

  .menu-header {
    justify-content: flex-end;
  }

  .menu-list {
    align-content: start;
  }

  @media (width <= 568px) {
    inset-inline-start: 64px;
    width: auto;
    inline-size: auto;
  }

  &[open] {
    --menu-interaction-delay: 1s;

    display: grid;
    translate: 0 0;

    @starting-style {
      translate: 640px 0;
    }

    &::backdrop {
      opacity: 1;

      @starting-style {
        opacity: 0;
      }
    }
  }
}