/*
 * Structural styles for ui-dropdownbutton.
 * The trigger sits inline with a chevron pseudo-element; the option
 * popup is absolutely positioned below the trigger and only visible
 * when the dropdown carries the `state_open` class.
 */

ui-dropdownbutton {
  padding-right: var(--elation-space-6);
}
ui-dropdownbutton::after {
  display: inline-block;
  content: '\25be';
  position: absolute;
  right: var(--elation-space-2);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
/* Trigger contains a hidden span per option, all stacked in a single
   grid cell; only the active one is visible. The trigger's width is the
   max of all spans, so the dropdown doesn't shrink/grow when the user
   picks a different option. */
ui-dropdownbutton > .ui_dropdown_trigger {
  display: inline-grid;
  vertical-align: middle;
}
ui-dropdownbutton > .ui_dropdown_trigger > .ui_dropdown_label {
  grid-area: 1 / 1;
  visibility: hidden;
  white-space: nowrap;
}
ui-dropdownbutton > .ui_dropdown_trigger > .ui_dropdown_label[data-active] {
  visibility: visible;
}
ui-dropdownbutton > .ui_dropdown_options {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 100%;
  z-index: 100;
  margin-top: var(--elation-space-1);
}
ui-dropdownbutton.state_open > .ui_dropdown_options {
  display: flex;
  flex-direction: column;
}
ui-dropdownbutton > .ui_dropdown_options > ui-button {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  padding-left: calc(var(--elation-control-px) + var(--elation-space-4));
  text-align: left;
  white-space: nowrap;
}
/* Default-visible marker for the currently-selected option so the
   indicator works even before a theme styles it. */
ui-dropdownbutton > .ui_dropdown_options > ui-button.state_selected::before {
  content: '✓';
  position: absolute;
  left: var(--elation-control-px);
  pointer-events: none;
}