.slide-over-backdrop {
  background-color: rgba(107, 114, 128, 0.1);
  backdrop-filter: blur(0.5px);
  animation: fadeIn 0.1s ease-in-out;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.slide-over-container {
  z-index: 9;
  position: fixed;
  overflow: hidden;
  pointer-events: none;
  transition: transform 0.2s ease-in-out;
}

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

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

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

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

.slide-over {
  padding-top: 1rem;
  background-color: white;
  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.2s ease-in-out;
}

.slide-over--bottom {
  transform: translateY(100%);
}

.slide-over--left {
  transform: translateX(-100%);
}

.slide-over--right {
  transform: translateX(100%);
}

.slide-over--top {
  transform: translateY(-100%);
}

/* Translation modifiers */
.translate-x-full {
  transform: translateX(100%);
}

.translate-x--full {
  transform: translateX(-100%);
}

.translate-y-full {
  transform: translateY(100%);
}

.translate-y--full {
  transform: translateY(-100%);
}

.translate-x-0,
.translate-y-0 {
  transform: translate(0, 0);
}

#close-button {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 23px;
}