Select.css

:root {
  --select-icon-width: 1.9rem;
}

.select {
  &.fullWidth {
    width: 100%;
  }
}

.selectControl {
  padding: var(--input-vertical-padding) var(--select-icon-width) var(--input-vertical-padding) var(--input-horizontal-padding);
  appearance: none;
  font-size: var(--font-size-medium);
  line-height: var(--line-height);

  & option {
    background-color: var(--bg);

    &:checked {
      background-color: selecteditem;
      color: selecteditemtext;
    }
  }

  &.placeholder {
    color: #888;

    & option {
      color: #444;
    }
  }
}

[dir="rtl"] .selectControl {
  padding: var(--input-vertical-padding) var(--input-horizontal-padding) var(--input-vertical-padding) var(--select-icon-width);
}

.selectWrap {
  position: relative;
}

.selectIcon {
  color: var(--color-icon);
  position: absolute;
  right: 0.4em;
  top: 0.4em;
  pointer-events: none;
}

[dir="rtl"] .selectIcon {
  left: 0.4em;
  right: auto;
}