/* Slideover - Side panel that slides in from left or right
 * Used on small screens to show aside content on demand
 * Always full height, different widths available
 */

.slideover {
  @apply fixed inset-y-0 m-0 w-full p-6;
  background: var(--color-surface);
  box-shadow: var(--elevation-floating);
  overflow-y: auto;
  height: 100vh;
  max-height: 100vh;
}

/* Width variants */
.slideover-sm {
  max-width: 20rem;
  /* 320px - narrow */
}

.slideover-md {
  max-width: 28rem;
  /* 448px - normal/default */
}

.slideover-lg {
  max-width: 42rem;
  /* 672px - wide */
}

.slideover-xl {
  max-width: 56rem;
  /* 896px - extra wide */
}

/* Right-side variant (default) */
.slideover-right {
  margin-left: auto;
  /* Push to right side */
  border-right: 1px solid var(--color-border);
  animation: slideover-in-right 0.3s var(--ease-natural);
}

.slideover-right[closing] {
  animation: slideover-out-right 0.3s var(--ease-natural);
}

/* Left-side variant */
.slideover-left {
  margin-right: auto;
  /* Push to left side */
  border-left: 1px solid var(--color-border);
  animation: slideover-in-left 0.3s var(--ease-natural);
}

.slideover-left[closing] {
  animation: slideover-out-left 0.3s var(--ease-natural);
}

.slideover::backdrop {
  background: rgba(0, 0, 0, 0.5);
  animation: slideover-backdrop-fade-in 0.3s var(--ease-natural);
}

.slideover[closing]::backdrop {
  animation: slideover-backdrop-fade-out 0.3s var(--ease-natural);
}

/* Right slide animations */
@keyframes slideover-in-right {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes slideover-out-right {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }
}

/* Left slide animations */
@keyframes slideover-in-left {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes slideover-out-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes slideover-backdrop-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideover-backdrop-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}