/* Slideover base styles - reset dialog defaults */
.slideover {
  position: fixed;
  height: 100vh;
  max-height: 100vh;

  width: 100vw;
  max-width: 100vw;

  margin: 0;
  padding: 0;
  border: none;

  background: var(--color-midnight-900);

  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Direction variants */
.slideover-right {
  inset: 0 0 0 auto;
  translate: 100%;
}

.slideover-left {
  inset: 0 auto 0 0;
  translate: -100%;
}

/* Desktop: restore constrained width */
@media (min-width: 768px) {
  .slideover {
    width: 90vw;
    max-width: 28rem;
  }

  .slideover-right {
    border-left: 1px solid var(--color-midnight-800);
  }

  .slideover-left {
    border-right: 1px solid var(--color-midnight-800);
  }

  .slideover.md\:max-w-xl {
    max-width: 36rem;
  }

  .slideover.md\:max-w-2xl {
    max-width: 42rem;
  }

  .slideover.md\:max-w-3xl {
    max-width: 48rem;
  }
}

/* Entry animation - opening (right) */
.slideover-right[open] {
  translate: 0;
  transition:
    translate 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    overlay 0.2s cubic-bezier(0.4, 0, 0.2, 1) allow-discrete,
    display 0.2s cubic-bezier(0.4, 0, 0.2, 1) allow-discrete;
}

@starting-style {
  .slideover-right[open] {
    translate: 100%;
  }
}

.slideover-right[closing] {
  translate: 100%;
}

/* Entry animation - opening (left) */
.slideover-left[open] {
  translate: 0;
  transition:
    translate 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    overlay 0.2s cubic-bezier(0.4, 0, 0.2, 1) allow-discrete,
    display 0.2s cubic-bezier(0.4, 0, 0.2, 1) allow-discrete;
}

@starting-style {
  .slideover-left[open] {
    translate: -100%;
  }
}

.slideover-left[closing] {
  translate: -100%;
}

/* Backdrop animations */
.slideover[open]::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  transition:
    background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    overlay 0.2s cubic-bezier(0.4, 0, 0.2, 1) allow-discrete,
    display 0.2s cubic-bezier(0.4, 0, 0.2, 1) allow-discrete;
}

@starting-style {
  .slideover[open]::backdrop {
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0);
  }
}

.slideover[closing]::backdrop {
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0);
}