@layer components {
  /* The dialog draws nothing (its fixed children do) and stays rendered while
     the panel slides out. Resets the UA padding, border and Canvas colours. */
  .slide-over-dialog {
    background: none;
    border: 0;
    color: inherit;
    margin: 0;
    padding: 0;
    transition: display 0.3s allow-discrete;
  }

  .slide-over-backdrop {
    background-color: color-mix(in srgb, var(--backdrop-color), transparent 90%);
    backdrop-filter: blur(0.5px);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition:
      opacity 0.3s ease-in-out,
      right 0.2s ease-out;
    z-index: var(--z-slide-over);
  }

  .slide-over-container {
    --slide-over-off-screen: translateX(100%);

    z-index: calc(var(--z-slide-over) + 1);
    position: fixed;
    /* clip, not hidden: hidden leaves the box programmatically scrollable, so a
       focus landing while the panel is still translated off-screen (Turbo's
       [autofocus]) scrolls the container and the offset
       sticks — the panel ends up half-visible until the frame is cleared. */
    overflow: clip;
    pointer-events: none;
    transition:
      transform 0.2s ease-in-out,
      right 0.2s ease-out;
    container-type: inline-size;
    font-size: var(--font-small-medium-responsive);
  }

  .slide-over-container--bottom {
    --slide-over-off-screen: translateY(100%);

    left: 0;
    right: 0;
    bottom: 0;
    height: 50vh;
    max-width: none;
  }

  /* A bottom panel and its backdrop stop at the open dock's edge, as the header
     and footer do, so a preview opened from the panel sits beside it instead of
     under it (slide_over_controller.js keeps the dock live). The dock slides in
     with the same 0.2s curve. */
  @media (min-width: 70ch) {
    body:has(#dock-toggle:checked) [data-slide-over-direction-value="bottom"] :is(.slide-over-backdrop, .slide-over-container) {
      right: var(--dock-width);
    }
  }

  .slide-over-container--right {
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 400px;
  }

  .slide-over-container--right-far {
    top: 0;
    right: 0;
    bottom: 0;
    width: 50vw;
    max-width: none;

    @media (max-width: 60rem) {
      width: 100vw;
    }
  }

  .slide-over {
    padding-block-start: var(--block-space);
    padding-block-end: var(--block-space);
    padding-inline: clamp(var(--block-space-three-eighths), 3vw, var(--block-space-double));
    background-color: var(--color-bg);
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06);
    height: 100%;
    overflow-y: scroll;
    pointer-events: auto;
    transform: var(--slide-over-off-screen);
    transition: transform 0.3s ease-in-out;
    will-change: transform;
  }

  .slide-over-dialog[open] {
    .slide-over-backdrop {
      opacity: 1;
    }

    .slide-over {
      transform: none;
    }
  }

  @starting-style {
    .slide-over-dialog[open] {
      .slide-over-backdrop {
        opacity: 0;
      }

      .slide-over {
        transform: var(--slide-over-off-screen);
      }
    }
  }

  .slide-over__close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 23px;
  }

  #slide-over-2 .slide-over-backdrop {
    z-index: calc(var(--z-slide-over) + 2);
  }

  #slide-over-2 .slide-over-container {
    z-index: calc(var(--z-slide-over) + 3);
  }
}