@use 'variables' as *;

// CSS Custom Properties for runtime customization
:root {
  --bs-sheet-zindex: #{$sheet-zindex};
  --bs-sheet-width: #{$sheet-width};
  --bs-sheet-max-width: #{$sheet-max-width};
  --bs-sheet-max-height: #{$sheet-max-height};
  --bs-sheet-bg: #{$sheet-bg};
  --bs-sheet-backdrop-bg: #{$sheet-backdrop-bg};
  --bs-sheet-backdrop-backdrop-filter: #{$sheet-backdrop-backdrop-filter};
  --bs-sheet-handle-bg: #{$sheet-handle-bg};
  --bs-sheet-handle-width: #{$sheet-handle-width};
  --bs-sheet-handle-height: #{$sheet-handle-height};
  --bs-sheet-handle-margin: #{$sheet-handle-margin};
  --bs-sheet-padding-x: #{$sheet-padding-x};
  --bs-sheet-padding-y: #{$sheet-padding-y};
  --bs-sheet-header-padding-y: #{$sheet-header-padding-y};
  --bs-sheet-body-padding-y: #{$sheet-body-padding-y};
  --bs-sheet-footer-padding-y: #{$sheet-footer-padding-y};
  --bs-sheet-box-shadow: #{$sheet-box-shadow};
  --bs-sheet-border-width: #{$sheet-border-width};
  --bs-sheet-border-color: #{$sheet-border-color};
  --bs-sheet-border-radius: #{$sheet-border-radius};
  --bs-sheet-focus-ring-width: #{$sheet-focus-ring-width};
  --bs-sheet-focus-ring-color: #{$sheet-focus-ring-color};
  --bs-sheet-disabled-opacity: #{$sheet-disabled-opacity};
}

// Base sheet styles
.sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--bs-sheet-zindex);
  display: flex;
  flex-direction: column;
  width: var(--bs-sheet-width);
  max-width: var(--bs-sheet-max-width);
  max-height: var(--bs-sheet-max-height);
  padding-bottom: env(safe-area-inset-bottom);
  border-radius: var(--bs-sheet-border-radius);
  background-color: var(--bs-sheet-bg);
  box-shadow: none;
  will-change: transform;
  transform: translateY(100%);
  // Moving a closed sheet out of view is not enough: hiding it also removes
  // its content from the accessibility tree and the tab order.
  visibility: hidden;
  // The whole sheet is draggable vertically; horizontal gestures (carousels,
  // sliders) stay native. touch-action only narrows down the ancestor chain,
  // so the root is the authoritative place to declare it.
  touch-action: pan-x pan-y;

  &::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: -1;
    height: 100vh;
    background-color: inherit;
    pointer-events: none;
  }

  &.show,
  &.showing,
  &.dragging {
    box-shadow: var(--bs-sheet-box-shadow);
  }

  // State classes
  &.show,
  &.showing,
  &.hiding {
    visibility: visible;
  }

  &.show {
    transform: translateY(0);
  }

  &.dragging {
    user-select: none;
  }

  &.hiding {
    box-shadow: none;
  }
}

// Sheet backdrop
.sheet-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: calc(var(--bs-sheet-zindex) - 1);
  width: 100vw;
  height: 100vh;
  background-color: var(--bs-sheet-backdrop-bg);
  backdrop-filter: var(--bs-sheet-backdrop-backdrop-filter);
  opacity: 0;

  &.show {
    opacity: 1;
  }
}

// Sheet handle
.sheet-handle {
  flex-shrink: 0;
  width: var(--bs-sheet-handle-width);
  height: var(--bs-sheet-handle-height);
  margin: var(--bs-sheet-handle-margin);
  border-radius: calc(var(--bs-sheet-handle-height) / 2);
  background-color: var(--bs-sheet-handle-bg);
}

// Sheet sections
.sheet-header {
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--bs-sheet-header-padding-y) var(--bs-sheet-padding-x);
  border-bottom: 1px solid var(--bs-sheet-border-color);

  .btn-close {
    margin-left: auto;
  }
}

.sheet-body {
  flex: 1 1 auto;
  padding: var(--bs-sheet-body-padding-y) var(--bs-sheet-padding-x);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  contain: layout style paint;
}

.sheet-footer {
  flex-shrink: 0;
  padding: var(--bs-sheet-footer-padding-y) var(--bs-sheet-padding-x);
  border-top: 1px solid var(--bs-sheet-border-color);
}

// Sheet title
.sheet-title {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 0;
}