/**
 * @file
 * Select with a drawn chevron. The control itself is styled by field.css.
 */

:where(.gdrfad-dds) .dds-select,
.gdrfad-dds-embedded .dds-select {
  position: relative;
  display: block;
}

/* :not(.dds-select--bare) is for weight, not filtering (a bare select has
 * no wrapper): field.css's control rule is (0,2,1) and its error rule
 * (0,3,1); at less, their 16px padding put the chevron over short values
 * such as the date-of-birth "Day" and "Year". */
:where(.gdrfad-dds) .dds-select > select:not(.dds-select--bare),
.gdrfad-dds-embedded .dds-select > select:not(.dds-select--bare) {
  padding-inline-end: 48px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

:where(.gdrfad-dds) .dds-select > select:not(.dds-select--bare):is(.error, [aria-invalid="true"]),
.gdrfad-dds-embedded .dds-select > select:not(.dds-select--bare):is(.error, [aria-invalid="true"]) {
  padding-inline-end: 47px;
}

:where(.gdrfad-dds) .dds-select__chevron,
.gdrfad-dds-embedded .dds-select__chevron {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--padding-padding-lg);
  display: flex;
  color: var(--surface-on-surface-variant);
  translate: 0 -50%;
  pointer-events: none;
}

:where(.gdrfad-dds) .dds-select > select:disabled ~ .dds-select__chevron,
.gdrfad-dds-embedded .dds-select > select:disabled ~ .dds-select__chevron {
  color: var(--state-layers-on-disabled);
}