
.swd-filter{
  --select-arrow-size: 20px;
  --select-arrow-gap:  0;
  --select-padding-x:  10px;
}

.swd-filter .swd-filter__control select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-inline-start: var(--select-padding-x) !important;
  padding-inline-end: calc(var(--select-padding-x) + var(--select-arrow-size) + var(--select-arrow-gap)) !important;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23555'>\
<path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right calc(var(--select-padding-x)) center;
  background-size: var(--select-arrow-size) var(--select-arrow-size);
  background-origin: content-box;
}

.swd-filter .swd-filter__control select::-ms-expand{
  display: none;
}

[dir="rtl"] .swd-filter .swd-filter__control select{
  background-position: left calc(var(--select-padding-x)) center;
  padding-inline-start: calc(var(--select-padding-x) + var(--select-arrow-size) + var(--select-arrow-gap)) !important;
  padding-inline-end: var(--select-padding-x) !important;
}
