/* Shared trade/activity dropdown appearance, including forms and pagination. */
:root {
  --dropdown-control-height:max(40px,calc(40px * var(--font-scale)));
  --dropdown-font-size:calc(10px * var(--font-scale));
}

#root .ui-select {
  --select-background:var(--surface);
  font-size:var(--dropdown-font-size);
  font-weight:400;
  line-height:1.5;
}

#root .ui-select .ui-select-trigger,
#root select {
  min-height:40px;
  height:var(--dropdown-control-height);
  padding:7px 12px;
  background-color:var(--surface);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--form-control-radius,10px);
  font-size:var(--dropdown-font-size)!important;
  font-weight:400;
  line-height:1.5;
}

#root .ui-select .ui-select-trigger {gap:12px}
#root .ui-select .ui-select-trigger:hover:not(:disabled),
#root select:hover:not(:disabled) {border-color:#514c59}

#root .ui-select[data-open=true] .ui-select-trigger {
  border-color:#514c59;
  border-bottom-color:transparent;
  border-radius:var(--form-control-radius,10px) var(--form-control-radius,10px) 0 0;
}
#root .ui-select[data-placement=top][data-open=true] .ui-select-trigger {
  border-top-color:transparent;
  border-bottom-color:#514c59;
  border-radius:0 0 var(--form-control-radius,10px) var(--form-control-radius,10px);
}
#root select {padding-right:46px}

/* Preserve room for the value and chevron in narrow pagination controls. */
@media(max-width:600px) {
  #root .page-size-select .ui-select .ui-select-trigger {padding-inline:4px;gap:4px}
  .app-shell[data-page=signals] .market-summary {
    --mobile-instrument-control-height:var(--dropdown-control-height);
  }
}