/**
 * Offcanvas Component
 */

:root {
  --offcanvas-width-sm: 280px;
  --offcanvas-width-md: 350px;
  --offcanvas-width-lg: 400px;
  --offcanvas-height-sm: 200px;
  --offcanvas-height-md: 300px;
  --offcanvas-height-lg: 400px;
  --offcanvas-bg: var(--white, #fff);
  --offcanvas-border-color: var(--gray-200, #e9ecef);
  --offcanvas-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
  --offcanvas-z-index: 1045;
  --offcanvas-transition: transform .3s ease-in-out;
}

[data-bs-theme="dark"] {
  --offcanvas-bg: var(--dark, #343a40);
  --offcanvas-border-color: var(--gray-700, #495057);
}

/* Base offcanvas styles */
.offcanvas {
  z-index: var(--offcanvas-z-index);
  background-color: var(--offcanvas-bg);
  border: 1px solid var(--offcanvas-border-color);
  box-shadow: var(--offcanvas-shadow);
  transition: var(--offcanvas-transition);
}

/* Sizing classes */
.offcanvas.offcanvas-sm {
  --bs-offcanvas-width: var(--offcanvas-width-sm);
  --bs-offcanvas-height: var(--offcanvas-height-sm);
}

.offcanvas.offcanvas-md {
  --bs-offcanvas-width: var(--offcanvas-width-md);
  --bs-offcanvas-height: var(--offcanvas-height-md);
}

.offcanvas.offcanvas-lg {
  --bs-offcanvas-width: var(--offcanvas-width-lg);
  --bs-offcanvas-height: var(--offcanvas-height-lg);
}

/* Customized header */
.offcanvas-header {
  border-bottom: 1px solid var(--offcanvas-border-color);
  padding: 0.75rem 1rem;
}

.offcanvas-title {
  font-size: 1.125rem;
  font-weight: 500;
}

/* Customized body */
.offcanvas-body {
  padding: 1rem;
  overflow-y: auto;
}

/* Animations for different positions */
.offcanvas-start.showing,
.offcanvas-start.show {
  transform: translateX(0);
}

.offcanvas-end.showing,
.offcanvas-end.show {
  transform: translateX(0);
}

.offcanvas-top.showing,
.offcanvas-top.show {
  transform: translateY(0);
}

.offcanvas-bottom.showing,
.offcanvas-bottom.show {
  transform: translateY(0);
}

/* Responsive adaptations */
@media (max-width: 767.98px) {
  .offcanvas-fullscreen-md {
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    max-height: none;
  }
}

/* Button styles to trigger offcanvas */
.offcanvas-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 0.25rem;
  text-decoration: none;
}