/* Dialog */

/* Hide dialogs by default to prevent flash of open state */
dialog:not([open]) {
  display: none !important;
}

/* Firefox has a bug with backdrop, so we can use a box-shadow instead */
dialog.modal {
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
}

dialog.slideover {
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
}

dialog.max-w-full {
  box-shadow: none;
}

dialog::backdrop {
  background: none;
}

/* Modal animations */
dialog.modal:not(.max-w-full)[open] {
  animation:
    fadeIn 200ms forwards,
    scaleIn 200ms forwards;
}

dialog.modal:not(.max-w-full)[closing] {
  animation:
    fadeOut 200ms forwards,
    scaleOut 200ms forwards;
}

/* Fullscreen modal animations - fade only */
dialog.modal.max-w-full[open] {
  animation: fadeIn 200ms forwards;
}

dialog.modal.max-w-full[closing] {
  animation: fadeOut 200ms forwards;
}

/* Center modals */
dialog.modal {
  margin: auto;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
}

/* Slideover animations */
dialog.slideover[open] {
  animation:
    fadeIn 200ms forwards ease-in-out,
    slide-in-from-right 200ms forwards ease-in-out;
}

dialog.slideover[closing] {
  pointer-events: none;
  animation:
    fadeOut 200ms forwards ease-in-out,
    slide-out-to-right 200ms forwards ease-in-out;
}

/* Slideover animations for top */
dialog.slideover-top[open] {
  animation:
    fadeIn 200ms forwards ease-in-out,
    slide-in-from-top 200ms forwards ease-in-out;
}

dialog.slideover-top[closing] {
  animation:
    fadeOut 200ms forwards ease-in-out,
    slide-out-to-top 200ms forwards ease-in-out;
}

/* Slideover animations for bottom */
dialog.slideover-bottom[open] {
  animation:
    fadeIn 200ms forwards ease-in-out,
    slide-in-from-bottom 200ms forwards ease-in-out;
}

dialog.slideover-bottom[closing] {
  animation:
    fadeOut 200ms forwards ease-in-out,
    slide-out-to-bottom 200ms forwards ease-in-out;
}

/* Slideover animations for left */
dialog.slideover-left[open] {
  animation:
    fadeIn 200ms forwards ease-in-out,
    slide-in-from-left 200ms forwards ease-in-out;
}

dialog.slideover-left[closing] {
  animation:
    fadeOut 200ms forwards ease-in-out,
    slide-out-to-left 200ms forwards ease-in-out;
}

/* Slideover animations for right */
dialog.slideover-right[open] {
  animation:
    fadeIn 200ms forwards ease-in-out,
    slide-in-from-right 200ms forwards ease-in-out;
}

dialog.slideover-right[closing] {
  animation:
    fadeOut 200ms forwards ease-in-out,
    slide-out-to-right 200ms forwards ease-in-out;
}

body {
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

/* Prevent scrolling while dialog is open */
body:has(dialog.modal[open]) {
  overflow: hidden;
}

body:has(dialog.slideover[open]) {
  overflow: hidden;
}

/* Scrollbar compensation for fixed elements */
:root {
  --scrollbar-compensation: 0px;
}

/* Apply compensation to body when modal/slideover/drawer is open */
body.modal-open,
body.slideover-open,
body.drawer-open {
  padding-right: var(--scrollbar-compensation);
}

/* Apply compensation to fixed elements */
body.modal-open .fixed,
body.slideover-open .fixed,
body.drawer-open .fixed {
  padding-right: var(--scrollbar-compensation);
}

/* Exclude slideover/drawer dialogs from scrollbar compensation */
body.slideover-open [data-slideover-target="dialog"],
body.drawer-open [data-drawer-target="dialog"] {
  padding-right: 0 !important;
}

dialog.modal {
  cursor: auto;
}

/* Div-based modals */
.modal-div {
  cursor: auto;
}

.modal-div.modal-open {
  display: flex !important;
}

/* Div modal animations - fade in and scale in content */
.modal-div.modal-visible {
  opacity: 1;
}

.modal-div.modal-visible > div {
  transform: scale(1);
}

.modal-div:not(.modal-visible) {
  opacity: 0;
}

.modal-div:not(.modal-visible) > div {
  transform: scale(0.95);
}

/* Prevent scrolling while div modal is open */
body:has(.modal-div.modal-open) {
  overflow: hidden;
}

/* Keyframes for fade animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Keyframes for new animations */
@keyframes slide-in-from-top {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slide-out-to-top {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

@keyframes slide-in-from-bottom {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slide-out-to-bottom {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

@keyframes slide-in-from-left {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slide-out-to-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes slide-in-from-right {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slide-out-to-right {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

dialog[data-floating-select-target="menu"] {
  opacity: 0;
}

dialog[data-floating-select-target="menu"][open] {
  opacity: 1;
}

/* Add new keyframes for scale animations */
@keyframes scaleIn {
  from {
    transform: scale(0.95);
  }
  to {
    transform: scale(1);
  }
}

@keyframes scaleOut {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.95);
  }
}

/* Add specific box-shadow handling for slideover directions */
dialog.slideover-top,
dialog.slideover-bottom {
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.6);
}

/* Drawer styles */
dialog.drawer {
  margin: 0;
  max-height: 100vh;
  height: auto;
  margin-inline: auto;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0;
  border-radius: 1rem 1rem 0 0;
  background: white;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.dark dialog.drawer {
  background: rgb(38 38 38);
}

dialog.drawer::backdrop {
  background: none;
}

/* Prevent body scroll when drawer is open */
body:has(dialog.drawer[open]) {
  overflow: hidden;
}

/* Drawer animations */
dialog.drawer[open] {
  animation: fadeIn 200ms forwards;
}

dialog.drawer[closing] {
  pointer-events: none;
  animation: fadeOut 200ms forwards;
}