@layer components {
  /*
   * Filter Bar Styles
   * Uses existing popover.css position-try fallbacks
   */

  /* Filters container */
  .filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--inline-space-half);
    padding-block-start: 2px; /* prevents input focus-ring clipping */

    &:has(dialog:popover-open) {
      z-index: calc(var(--z-nav, 100) + 1);
    }
  }

  /* Search input */
  .filter__search {
    max-inline-size: 20em;
    min-inline-size: 12em;
  }

  /* Quick filter dropdowns */
  .quick-filter {
    position: relative;
    anchor-name: var(--anchor-name); /* Allow inline anchor-name override */

    .input--select {
      background: var(--color-bg);
      border: 1px solid var(--color-gray);
      transition: border-color 150ms ease, background-color 150ms ease;
    }

    /* Active state - has non-default selection */
    &.quick-filter--active:not(.quick-filter--with-default) .input--select {
      background: var(--color-blue-light);
      border-color: var(--color-blue);
      font-weight: 500;
    }
  }

  /* Select button with dropdown arrow */
  .input--select {
    display: inline-flex;
    align-items: center;
    gap: var(--inline-space-half);
    max-inline-size: 20ch;

    &::after {
      content: "";
      border: 4px solid transparent;
      border-top-color: currentColor;
      margin-block-start: 2px;
      flex-shrink: 0;
    }
  }

  /* Clear button - hidden until filters are active */
  .filters__manage {
    display: none;
  }

  .filters--has-filters-set .filters__manage {
    display: flex;
  }

  /* Popup dropdown - reuses popover.css position-try fallbacks */
  .popup {
    inset: auto;
    margin: 0;
    margin-block-start: var(--block-space-half);
    padding: var(--block-space-half);

    background: var(--color-bg);
    border: var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-small);

    min-inline-size: 15ch;
    max-inline-size: 40ch;
    max-block-size: 50vh;
    overflow-y: auto;

    /* Anchor positioning - reuse fallbacks from popover.css */
    top: anchor(bottom);
    left: anchor(left);
    position-try-fallbacks: --below-right, --below-left, --above-left, --above-right;

    /* Fade transition */
    opacity: 0;
    transition: opacity 0.15s ease, display 0.15s ease;
    transition-behavior: allow-discrete;

    &:popover-open {
      opacity: 1;

      @starting-style {
        opacity: 0;
      }
    }
  }

  /* Popup title */
  .popup__title {
    display: block;
    font-weight: 600;
    padding: var(--block-space-half) var(--inline-space-half);
    border-block-end: var(--border);
    margin-block-end: var(--block-space-half);
  }

  /* Transparent input for in-popup search */
  .form__input--transparent {
    background: transparent;
    border: none;
    border-block-end: var(--border);
    border-radius: 0;
    padding-inline: 0;

    &:focus {
      outline: none;
      border-color: var(--color-blue);
    }
  }

  /* Popup list - reset list styling */
  .popup__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Popup item with checkbox semantics */
  .popup__item {
    border-radius: calc(var(--border-radius) / 2);

    &:hover {
      background: var(--color-gray-lightest);
    }

    .checked {
      visibility: hidden;
      flex-shrink: 0;
    }

    &[aria-checked="true"] {
      background: var(--color-blue-light);

      .checked {
        visibility: visible;
      }
    }

    &[aria-selected="true"] {
      background: var(--color-gray-light);
    }
  }

  /* Sticky section header inside a multi-section popup. */
  .popup__section:not(:has(.popup__item:not([hidden]))) {
    display: none;
  }

  .popup__section-title {
    background: var(--color-bg);
    color: var(--color-ink-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: var(--block-space-half) var(--inline-space-half) var(--block-space-third);
    position: sticky;
    text-transform: uppercase;
    inset-block-start: 0;
    z-index: 1;
  }

  /* Full-width button inside popup item */
  .popup__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--inline-space);
    inline-size: 100%;
    padding: var(--block-space-half) var(--inline-space-half);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: start;
  }

  /* Date filter - allow calendar overflow */
  .popup--date {
    min-inline-size: 20ch;
    overflow: visible;
  }

  .popup__date-inputs {
    .form-group {
      margin: 0;
    }
  }
}