.ui-filter-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  flex: 0 0 auto;
}

.ui-filter-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  width: auto;
  min-width: var(--size-control-height-md);
  height: var(--size-control-height-md);
  box-sizing: border-box;
  padding: 0 var(--space-6);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  outline: var(--border-width) solid transparent;
  outline-offset: var(--space-1);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-md);
  white-space: nowrap;
  cursor: pointer;
  transition-property: border-color, background-color, box-shadow, color;
  transition-duration: 120ms;
  transition-timing-function: ease-out;
}

.ui-filter-dropdown__trigger:hover {
  border-color: var(--color-border-muted);
  color: var(--color-selected);
}

.ui-filter-dropdown__trigger:focus-visible,
.ui-filter-dropdown--open .ui-filter-dropdown__trigger {
  border-color: var(--color-border-muted);
  color: var(--color-selected);
}

.ui-filter-dropdown__value,
.ui-filter-dropdown__placeholder {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-filter-dropdown__placeholder {
  color: var(--color-text-muted);
}

.ui-filter-dropdown__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 0;
  line-height: var(--line-height-md);
  white-space: nowrap;
}

.ui-filter-dropdown__arrow::before {
  display: block;
  width: 30px;
  height: 30px;
  background-color: currentColor;
  mask-image: url("/icons/runs/chevron-muted.svg");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  content: "";
}

.ui-filter-dropdown__menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  z-index: var(--z-index-dropdown);
  min-width: 100%;
  max-height: 240px;
  overflow-y: auto;
  box-sizing: border-box;
  padding: var(--space-2) 0;
  border: var(--border-width) solid var(--color-border-muted);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-dropdown);
}

.ui-filter-dropdown__option {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  min-width: 0;
  min-height: var(--size-control-height-sm);
  box-sizing: border-box;
  padding: 0 var(--space-6);
  border: 0;
  background-color: transparent;
  color: var(--color-text-primary);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-md);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.ui-filter-dropdown__option:hover,
.ui-filter-dropdown__option:focus-visible,
.ui-filter-dropdown__option--focused {
  background-color: var(--color-hover);
  color: var(--color-selected);
}

.ui-filter-dropdown__option--selected {
  color: var(--color-selected);
}