@layer components {
  /* Base
  /* -------------------------------------------------------------------------- */

  /* The wrapper anchors the popup; attached flush below the trigger, the two
     read as a single box that expands downward when clicked. */
  .catalogue-picker {
    inline-size: var(--catalogue-picker-inline-size, 26ch);
    min-inline-size: 0;
    position: relative;
  }

  /* Elements
  /* -------------------------------------------------------------------------- */

  .catalogue-picker__trigger {
    --btn-background: transparent;
    --btn-font-weight: 600;
    --btn-hover-brightness: 1;

    gap: 0.75em;
    inline-size: 100%;
    justify-content: space-between;

    @media (any-hover: hover) {
      &:hover {
        --btn-background: var(--color-surface-subtle);
      }
    }

    /* While open, square off the bottom so it merges with the popup */
    .catalogue-picker:has(.catalogue-picker__popup[open]) & {
      border-end-end-radius: 0;
      border-end-start-radius: 0;
    }
  }

  .catalogue-picker__label {
    /* line-height above 1 so overflow: hidden doesn't clip descenders
       against .btn's line-height: 1 */
    line-height: 1.25;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .catalogue-picker__caret {
    transition: rotate var(--duration-fast) ease-in-out;

    .catalogue-picker:has(.catalogue-picker__popup[open]) & {
      rotate: 180deg;
    }
  }

  /* Scoped to beat .popup in popup.css, which loads later at equal specificity */
  .catalogue-picker .catalogue-picker__popup {
    border-block-start: 0;
    border-start-end-radius: 0;
    border-start-start-radius: 0;
    inline-size: 100%;
    inset: 100% 0 auto 0;
    translate: none;
  }

  /* Indent so item labels align under the "Catalogues" summary text */
  .catalogue-picker__catalogues .popup__list,
  .catalogue-picker__catalogues .popup__empty {
    padding-inline-start: 1.4em;
  }

  /* The Statements section row, expanding into the catalogue's income sources */
  .catalogue-picker__statements-summary {
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }
  }

  .catalogue-picker__statements-caret {
    --icon-size: 0.9em;

    color: var(--color-ink-muted);
    margin-inline-start: auto;
    transition: rotate var(--duration-fast) ease-in-out;

    .catalogue-picker__statements[open] > summary & {
      rotate: 90deg;
    }
  }

  /* Indent so income source names align under the "Statements" label */
  .catalogue-picker__statements .popup__list,
  .catalogue-picker__statements .popup__empty {
    padding-inline-start: 1.55em;
  }

  @media print {
    .catalogue-picker { display: none; }
  }
}