.ad-selector {
  --foreground: var(--aurelia-ux--ad-selector-foreground, var(--aurelia-ux--design-control-foreground, #212121));
  --foreground-label: var(--aurelia-ux--ad-selector-foreground-label, var(--aurelia-ux--design-control-label-color, #757575));
  --background: var(--aurelia-ux--ad-selector-background, var(--aurelia-ux--design-control-background, #E0E0E0));
  --background-hover: var(--aurelia-ux--ad-selector-background-hover, #00000027);
  --active-color: var(--aurelia-ux--ad-selector-active-color, var(--aurelia-ux--design-primary, #3F51B5));

  --font-size: var(--aurelia-ux--ad-selector-font-size, 16px);
  --letter-spacing: var(--aurelia-ux--ad-selector-letter-spacing, inherit);
  --label-font-size: var(--aurelia-ux--ad-selector-label-font-size, 12px);
  --label-letter-spacing: var(--aurelia-ux--ad-selector-label-letter-spacing, 0.5px);
  --line-height: var(--aurelia-ux--ad-selector-line-height, 1.6);
  --label-line-height: var(--aurelia-ux--ad-selector-label-line-height, 1.6);

  --border-color: var(--aurelia-ux--ad-selector-border-color, var(--aurelia-ux--design-control-label-color, #757575));
  --border-radius: var(--aurelia-ux--ad-selector-border-radius, 4px);
  --border-width: var(--aurelia-ux--ad-selector-border-width, 1px);
  --border-active-width: var(--aurelia-ux--ad-selector-border-active-width, 2px);

  --disabled-foreground: var(--aurelia-ux--ad-selector-disabled-foreground, var(--aurelia-ux--design-disabled-foreground, #9E9E9E));
  --disabled-background: var(--aurelia-ux--ad-selector-disabled-background, var(--aurelia-ux--design-disabled-background, #e1e1e1));

  --error: var(--aurelia-ux--ad-selector-error, var(--aurelia-ux--design-error, #F44336));

  cursor: pointer;
}