@layer components {
  .slide-over-backdrop {
    background-color: rgba(107, 114, 128, 0.1);
    backdrop-filter: blur(0.5px);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 198;
  }

  .slide-over-backdrop--visible {
    opacity: 1;
  }

  .slide-over-backdrop--closing {
    opacity: 0;
  }

  .slide-over-container {
    z-index: 199;
    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], autofocus controller) 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;
    container-type: inline-size;
    font-size: var(--font-small-medium-responsive);
  }

  .slide-over-container--bottom {
    left: 0;
    right: 0;
    bottom: 0;
    height: 50vh;
    max-width: none;
  }

  .slide-over-container--bottom-far {
    left: 0;
    right: 0;
    bottom: 0;
    height: 75vh;
    max-width: none;
  }

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

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

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

  .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-container--top {
    left: 0;
    right: 0;
    top: 0;
    height: 50vh;
    max-width: none;
  }

  .slide-over-container--top-far {
    left: 0;
    right: 0;
    top: 0;
    height: 75vh;
    max-width: none;
  }

  .slide-over {
    padding-block-start: var(--block-space);
    padding-block-end: var(--block-space);
    padding-inline: clamp(var(--space-xxs), 3vw, calc(var(--block-space) * 2));
    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;
    transition: transform 0.3s ease-in-out;
    will-change: transform;
  }

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

  #slide-over-2 .slide-over-backdrop {
    z-index: 200;
  }

  #slide-over-2 .slide-over-container {
    z-index: 201;
  }
}