@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slide-up {
  from {
    transform: translateY(100%);
    caret-color: transparent;
  }
  99% {
    caret-color: transparent;
  }
  to {
    transform: translateY(0);
    caret-color: auto;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slide-down {
  from {
    transform: translateY(0);
    caret-color: transparent;
  }
  to {
    transform: translateY(100%);
    caret-color: transparent;
  }
}

.bottom-sheet {
  border: var(--hair) solid var(--post-border-color);
  border-bottom: none;
  border-radius: var(--sheet-border-radius) var(--sheet-border-radius) 0 0;
  background-color: light-dark(var(--white), var(--mid-gray));
  color: var(--text-color);
  max-width: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  height: auto;
  box-shadow: var(--shadow-color-heavy);
  animation: slide-up 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  transform: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  padding-bottom: var(--safe-area-inset-bottom);
}

/* Shared scroll region for a bottom sheet's flex-fill body: fills the space
   between a fixed header/footer and scrolls its own overflow. Requires a
   flex-column ancestor (the dialog or content wrapper) to give it height. */
.sheet-scroll-region {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.bottom-sheet[data-closing] {
  pointer-events: none;
}

/* Only mobile bottom sheets animate out; on desktop they close instantly. */
@media (max-width: 799px) {
  .bottom-sheet[data-closing] {
    animation: slide-down 0.2s cubic-bezier(0.32, 0.72, 0, 1) forwards;
  }
}

@media (min-width: 800px) {
  .bottom-sheet {
    padding-bottom: 0;
    width: 90%;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    height: auto;
    max-height: 80vh;
    border-bottom: var(--hair) solid var(--post-border-color);
    border-radius: var(--dialog-border-radius);
    box-shadow: none;
    animation: none;
    transform: translate(-50%, -50%);
  }
}

.bottom-sheet::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 4px;
  background-color: var(--light-gray);
  border-radius: 2px;
}

@media (min-width: 800px) {
  .bottom-sheet::before {
    display: none;
  }
}

.bottom-sheet.no-handle::before {
  display: none;
}

.bottom-sheet::backdrop {
  background-color: var(--overlay-color-medium);
  animation: fade-in 0.2s ease-out;
}

.bottom-sheet[data-closing]::backdrop {
  animation: fade-out 0.15s ease-in forwards;
}

@media (max-width: 799px) {
  .bottom-sheet::backdrop {
    animation-duration: 0.3s;
  }

  .bottom-sheet[data-closing]::backdrop {
    animation-duration: 0.2s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bottom-sheet {
    animation: none;
  }
}

@media (max-width: 799px) {
  .bottom-sheet-fullscreen {
    top: var(--sheet-top);
    max-height: none;
  }
}

@media (max-width: 799px) {
  .bottom-sheet-stacked {
    top: var(--stacked-sheet-top);
    max-height: none;
  }
}