/* Shared dropdown indicator contract: native single selects and custom triggers. */
:root {
  --pg-dropdown-indicator: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='m3 4.5 3 3 3-3' stroke='%235F6B73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

:is(#app, #modalRoot) select:not([multiple]):not([size]),
:is(#app, #modalRoot) select:not([multiple])[size="1"],
:is(#app, #modalRoot) .pg-dropdown-trigger {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 30px;
  background-image: var(--pg-dropdown-indicator);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
}

:is(#app, #modalRoot) .pg-dropdown-trigger {
  list-style: none;
}
:is(#app, #modalRoot) .pg-dropdown-trigger::-webkit-details-marker {
  display: none;
}
:is(#app, #modalRoot) .pg-dropdown-trigger > .tpa-multi-text {
  min-width: 0;
  flex: 1;
}

:is(#app, #modalRoot) .pg-dropdown-arrow {
  width: 32px;
  height: 30px;
  right: 1px;
  padding: 0;
  background-image: var(--pg-dropdown-indicator);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}