@charset "UTF-8";
:host {
  --color-background-default: var(--pine-color-background-container);
  background: var(--color-background-default);
  border-collapse: separate;
  border-radius: inherit;
  box-sizing: border-box;
  display: table;
  isolation: isolate;
  width: 100%;
}

:host(:focus-visible) {
  outline: var(--pine-outline-focus);
}

/*
 * Responsive Table Architecture
 *
 * When responsive=true, the table uses a nested structure to provide horizontal scrolling
 * while maintaining proper width behavior and scroll shadows:
 *
 * Host (.pds-table-responsive-host)
 * ├── Shadow Left (positioned fixed to left edge)
 * ├── Shadow Right (positioned fixed to right edge)
 * └── Container (.pds-table-responsive-container)
 *     └── Wrapper (.pds-table-responsive-wrapper)
 *         └── Table (.pds-table)
 *
 * - Host: Constrains everything to parent width, clips shadows to border-radius
 * - Shadows: Stay fixed during scroll, provide visual scroll indicators
 * - Container: Handles horizontal scrolling (overflow-x: auto)
 * - Table: Expands to full width or scrolls based on content
 */
:host(.pds-table-responsive-host) {
  border-radius: inherit;
  box-sizing: border-box !important;
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  width: 100% !important;
}

.pds-table-responsive-container {
  border-radius: inherit;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  position: relative !important;
  width: 100% !important;
}

.pds-table-responsive-wrapper {
  border-radius: inherit;
  box-sizing: border-box !important;
  display: block !important;
  position: relative !important;
  width: 100% !important;
}

.pds-table-responsive-wrapper .pds-table {
  display: table !important;
  min-width: max-content !important;
  table-layout: auto !important;
  white-space: nowrap !important;
  width: 100% !important;
}

/* Shadows positioned relative to host (non-scrolling), covering container edges */
.scroll-shadow-left,
.scroll-shadow-right {
  height: 100%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: opacity 0.1s ease;
  width: 4px;
  z-index: var(--pine-z-index);
}

.scroll-shadow-left {
  /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */
  background: linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);
  border-end-start-radius: inherit;
  border-start-start-radius: inherit;
  inset-inline-start: 0;
}

:host-context([dir=rtl]) .scroll-shadow-left {
  /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */
  background: linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent);
}

.scroll-shadow-right {
  /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */
  background: linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent);
  border-end-end-radius: inherit;
  border-start-end-radius: inherit;
  inset-inline-end: 0;
}

:host-context([dir=rtl]) .scroll-shadow-right {
  /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */
  background: linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);
}