:host {
  --box-shadow-focus: 0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);
  display: inline-block;
  position: relative;
}

.pds-filter__trigger {
  align-items: center;
  /* stylelint-disable-next-line property-no-unknown */
  anchor-name: --filter-trigger;
  background: var(--pine-color-background-container);
  border: var(--pine-border);
  border-radius: var(--pine-dimension-100);
  box-shadow: var(--pine-box-shadow-050);
  box-sizing: border-box;
  color: var(--pine-color-text-tertiary);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--pine-font-family-inter);
  font-size: var(--pine-font-size-100);
  font-weight: var(--pine-font-weight-400);
  gap: var(--pine-dimension-050);
  letter-spacing: var(--pine-letter-spacing-114);
  line-height: var(--pine-line-height-150);
  padding: var(--pine-dimension-025) var(--pine-dimension-125);
  position: relative;
  transition: all var(--pine-motion-duration-base) ease;
}
.pds-filter__trigger pds-icon {
  block-size: var(--pine-font-size-100);
  color: var(--pine-color-text-secondary);
  flex-shrink: 0;
  inline-size: var(--pine-font-size-100);
}
.pds-filter__trigger:hover, .pds-filter__trigger.pds-filter__trigger--open {
  background-color: var(--pine-color-background-subtle);
  border-color: var(--pine-color-border-hover);
  color: var(--pine-color-text-hover);
}
.pds-filter__trigger:hover pds-icon, .pds-filter__trigger.pds-filter__trigger--open pds-icon {
  color: var(--pine-color-text-secondary);
}
.pds-filter__trigger:focus-visible {
  box-shadow: var(--box-shadow-focus);
  outline: none;
}
.pds-filter__trigger:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.pds-filter__trigger--selected {
  background-color: var(--pine-color-purple-050);
  border-color: var(--pine-color-purple-500);
  color: var(--pine-color-purple-600);
}
.pds-filter__trigger--selected pds-icon {
  color: var(--pine-color-purple-600);
}
.pds-filter__trigger--selected:hover, .pds-filter__trigger--selected.pds-filter__trigger--open {
  background-color: var(--pine-color-purple-100);
  border-color: var(--pine-color-purple-500);
  color: var(--pine-color-purple-600);
}
.pds-filter__trigger--selected:hover pds-icon, .pds-filter__trigger--selected.pds-filter__trigger--open pds-icon {
  color: var(--pine-color-purple-600);
}
.pds-filter__trigger--selected:focus-visible {
  box-shadow: var(--box-shadow-focus);
  outline: none;
}

.pds-filter__trigger--more {
  background-color: var(--pine-color-background-container-hover);
  border: var(--pine-border-width-thin) dashed var(--pine-color-border);
  color: var(--pine-color-text-tertiary);
}
.pds-filter__trigger--more pds-icon {
  color: var(--pine-color-text-secondary);
}
.pds-filter__trigger--more:hover, .pds-filter__trigger--more.pds-filter__trigger--open {
  background-color: var(--pine-color-background-subtle);
  border-color: var(--pine-color-border-hover);
  color: var(--pine-color-text-hover);
}
.pds-filter__trigger--more:hover pds-icon, .pds-filter__trigger--more.pds-filter__trigger--open pds-icon {
  color: var(--pine-color-text-secondary);
}
.pds-filter__trigger--more:focus-visible {
  box-shadow: var(--box-shadow-focus);
  outline: none;
}

.pds-filter__trigger--clear {
  background: transparent;
  border: var(--pine-border-width-thin) solid transparent;
  border-radius: var(--pine-dimension-100);
  box-shadow: none;
  color: var(--pine-color-purple-600);
}
.pds-filter__trigger--clear pds-icon {
  color: var(--pine-color-purple-600);
}
.pds-filter__trigger--clear:hover {
  background-color: var(--pine-color-purple-100);
  border-color: var(--pine-color-purple-100);
  color: var(--pine-color-purple-600);
}
.pds-filter__trigger--clear:hover pds-icon {
  color: var(--pine-color-purple-600);
}
.pds-filter__trigger--clear:focus-visible {
  box-shadow: var(--box-shadow-focus);
  outline: none;
}

.pds-filter__button-content {
  align-items: center;
  display: inline-flex;
  gap: var(--pine-dimension-050);
  max-inline-size: 148px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pds-filter__button-text {
  line-height: var(--pine-line-height-150);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pds-filter__dropdown-icon {
  block-size: var(--pine-dimension-200);
  flex-shrink: 0;
  inline-size: var(--pine-dimension-200);
}

.pds-filter__popover {
  background-color: var(--pine-color-background-overlay);
  border: 0;
  border-radius: var(--pine-dimension-100);
  box-shadow: var(--pine-box-shadow-100);
  display: none;
  inline-size: 228px;
  inset: unset;
  padding: var(--pine-dimension-100);
  z-index: var(--pine-z-index-overlay);
  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
}
.pds-filter__popover:popover-open, .pds-filter__popover.is-open {
  display: block;
}
.pds-filter__popover {
  /* Modern browsers: CSS anchor positioning with JavaScript-controlled flipping */
}
@supports (anchor-name: --test) {
  .pds-filter__popover {
    inset-block-start: calc(anchor(--filter-trigger bottom) + var(--pine-dimension-100));
    inset-inline-start: anchor(--filter-trigger start);
    position: fixed; /* Anchor positioning requires fixed positioning */
    /* stylelint-disable-next-line property-no-unknown */
    position-anchor: --filter-trigger;
    /* CSS position-try disabled for precise JavaScript-controlled flipping */
    /* Flipping classes applied by JavaScript for precise control */
  }
  .pds-filter__popover.popover-flip-horizontal {
    inset-inline-end: anchor(--filter-trigger end);
    inset-inline-start: auto;
  }
  .pds-filter__popover.popover-flip-vertical {
    inset-block-start: anchor(--filter-trigger top);
    transform: translateY(calc(-100% - var(--pine-dimension-100)));
  }
  .pds-filter__popover.popover-flip-horizontal.popover-flip-vertical {
    inset-block-start: anchor(--filter-trigger top);
    inset-inline-end: anchor(--filter-trigger end);
    inset-inline-start: auto;
    transform: translateY(calc(-100% - var(--pine-dimension-100)));
  }
  .pds-filter__popover {
    /* Ensure fallback class works with flipping in modern browsers */
  }
  .pds-filter__popover.is-open.popover-flip-horizontal {
    inset-inline-end: anchor(--filter-trigger end);
    inset-inline-start: auto;
  }
  .pds-filter__popover.is-open.popover-flip-vertical {
    inset-block-start: anchor(--filter-trigger top);
    transform: translateY(calc(-100% - var(--pine-dimension-100)));
  }
  .pds-filter__popover.is-open.popover-flip-horizontal.popover-flip-vertical {
    inset-block-start: anchor(--filter-trigger top);
    inset-inline-end: anchor(--filter-trigger end);
    inset-inline-start: auto;
    transform: translateY(calc(-100% - var(--pine-dimension-100)));
  }
}