.c--dropdown {
  --_dropdown_f-s: var(--dropdown_f-s, var(--f-s_sm));
  --_dropdown_f-w: var(--dropdown_f-w, 500);
  --_dropdown_c: var(--dropdown_c, var(--c-gray-600));
  --_dropdown_bg: var(--dropdown_bg, var(--c-gray-50));
  --_dropdown_pos: var(--dropdown_pos, relative);
  --_dropdown_m-b-s: var(--dropdown_m-b-s, 0);
  --_dropdown_p-i: var(--dropdown_p-i, var(--_form_input_p-i, var(--scale-200)));
  --_dropdown_p-b: var(--dropdown_p-b, var(--_form_input_p-b, var(--scale-200)));
  --_dropdown_b-r: var(--dropdown_b-r, var(--_form_input_b-r, var(--scale-100)));

  --_dropdown_content_g: var(--dropdown_content_g, var(--scale-100));

  --_dropdown_item_c: var(--dropdown_item_c, var(--_dropdown_c));
  --_dropdown_item_bg: var(--dropdown_item_bg, transparent);

  --_dropdown_c_h: var(--dropdown_c_h, var(--c-white));
  --_dropdown_bg_h: var(--dropdown_bg_h, var(--_dropdown_c_h));
  --_dropdown_item_c_h: var(--dropdown_item_c_h, var(--c-white));
  --_dropdown_item_bg_h: var(--dropdown_item_bg_h, var(--c-primary-500));

  --_dropdown_c_a: var(--dropdown_c_a, var(--c-gray-600));
  --_dropdown_bg_a: var(--dropdown_bg_a, var(--c-gray-200));
  --_dropdown_item_c_a: var(--dropdown_item_c_a, var(--c-primary-600));
  --_dropdown_item_bg_a: var(--dropdown_item_bg_a, var(--_dropdown_item_bg));

  /* The content panel opens in flow by default: it takes its width from the
     trigger, grows as tall as it needs and carries none of the card chrome a
     floating panel needs. The `absolute` variant at the bottom switches all of
     that on; every value stays reachable through its public property so a
     consumer can turn a single piece off again. */
  --_dropdown_content_pos: var(--dropdown_content_pos, relative);
  --_dropdown_content_w: var(--dropdown_content_w, auto);
  --_dropdown_content_m-h: var(--dropdown_content_m-h, none);
  --_dropdown_content_overflow: var(--dropdown_content_overflow, visible);
  --_dropdown_content_bg: var(--dropdown_content_bg, var(--_dropdown_bg));
  --_dropdown_content_p-b: var(--dropdown_content_p-b, var(--_dropdown_p-b));
  --_dropdown_content_p-i: var(--dropdown_content_p-i, var(--_dropdown_p-i));
  --_dropdown_content_b-r: var(--dropdown_content_b-r, 0);
  --_dropdown_content_b-sh: var(--dropdown_content_b-sh, none);

  font-size: var(--_dropdown_f-s);
  font-weight: var(--_dropdown_f-w);
  position: var(--_dropdown_pos);
}

  .c--dropdown .dropdown__summary {
    cursor: pointer;
    display: var(--dropdown_d, flex);
    justify-content: var(--dropdown_a-i, space-between);
    align-items: center;
    gap: var(--dropdown_g, var(--scale-200));
    color: var(--_dropdown_summary_c, var(--_dropdown_c));
    padding-block: var(--dropdown_summary_p-b, calc(var(--_dropdown_p-b) - 2px));
    padding-inline: var(--dropdown_summary_p-i, var(--_dropdown_p-i));
    background: var(--_dropdown_summary_bg, var(--_dropdown_bg));
    border-radius: var(--border-radius, var(--_dropdown_b-r));
    min-width: var(--dropdown_summary_m-w, 202px);
  }

  .c--dropdown .dropdown__summary > * {
      pointer-events: none;
    }

  .c--dropdown .dropdown__summary .summary {
      display: none;
    }

  .c--dropdown .dropdown__content {
    position: var(--_dropdown_content_pos);
    inset-inline-start: 0;
    box-sizing: border-box;
    min-width: 100%;
    width: var(--_dropdown_content_w);
    max-height: var(--_dropdown_content_m-h);
    overflow-y: var(--_dropdown_content_overflow);
    color: var(--_dropdown_c);
    background: var(--_dropdown_content_bg);
    padding-block: var(--_dropdown_content_p-b);
    padding-inline: var(--_dropdown_content_p-i);
    margin-block-start: var(--_dropdown_m-b-s);
    border-radius: var(--_dropdown_content_b-r);
    box-shadow: var(--_dropdown_content_b-sh);
    z-index: var(--z-dropdown);
  }

  .c--dropdown .dropdown__content label {
      font-size: 0.8125rem;
    }

  /* Floating variant: the panel leaves the flow and hangs under the summary as
     a white, rounded, elevated card, matched to the trigger width and scrolling
     once the option list outgrows it. */

  .c--dropdown.has-position-absolute {
    --_dropdown_content_pos: var(--dropdown_content_pos, absolute);
    --_dropdown_content_w: var(--dropdown_content_w, 100%);
    --_dropdown_content_m-h: var(--dropdown_content_m-h, 260px);
    --_dropdown_content_overflow: var(--dropdown_content_overflow, auto);
    --_dropdown_content_bg: var(--dropdown_content_bg, var(--c-white));
    --_dropdown_content_p-b: var(--dropdown_content_p-b, 12px);
    --_dropdown_content_p-i: var(--dropdown_content_p-i, 12px);
    --_dropdown_content_b-r: var(--dropdown_content_b-r, 12px);
    --_dropdown_content_b-sh: var(--dropdown_content_b-sh, 0 6px 20px rgba(0, 0, 0, 0.18));
    --_dropdown_m-b-s: var(--dropdown_m-b-s, 2px);
  }