:root {
  --dropdown-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m4.5 7 5.5 5.5L15.5 7' stroke='%23748DA3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

select:not([multiple]):not([size]) {
  appearance: none;
  background-image: var(--dropdown-chevron);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  padding-inline-end: 38px;
}

select:not([multiple]):not([size]):focus-visible,
.strength-dropdown-toggle:focus-visible,
.theme-select-trigger:focus-visible,
.menu-language-trigger:focus-visible,
[aria-haspopup="listbox"]:focus-visible {
  outline: 2px solid var(--accent, #5c91bc);
  outline-offset: 2px;
}

.strength-dropdown-toggle {
  padding-inline-end: 12px;
}
.strength-dropdown-toggle::after {
  display: block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border: 0;
  background: var(--dropdown-chevron) center / 16px 16px no-repeat;
  content: "";
  font-size: 0;
  transition: transform 0.16s ease;
}
.strength-selector.is-open .strength-dropdown-toggle::after {
  transform: rotate(180deg);
}

.theme-select-trigger {
  padding-inline-end: 12px;
}
.theme-select-chevron,
.menu-language-chevron,
#admin-direct-chat-picker-trigger > span:last-child {
  display: block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  overflow: hidden;
  background: var(--dropdown-chevron) center / 16px 16px no-repeat;
  color: transparent;
  font-size: 0;
  transition: transform 0.16s ease;
}
.theme-select-trigger[aria-expanded="true"] .theme-select-chevron {
  transform: rotate(180deg);
}
.menu-language-trigger[aria-expanded="true"] .menu-language-chevron,
#admin-direct-chat-picker-trigger[aria-expanded="true"] > span:last-child {
  transform: rotate(180deg);
}

.menu-language-trigger,
#admin-direct-chat-picker-trigger {
  padding-inline-end: 12px;
}
