#filters .routes-filter-view-btn,
#filters .routes-filter-create,
#filters .nimbus-runs-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-control-height-md);
  height: var(--size-control-height-md);
  padding: 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  transition-property: border-color, background-color, color;
  transition-duration: 120ms;
  transition-timing-function: ease-out;
}

#filters .routes-filter-view-btn:hover,
#filters .routes-filter-create:hover,
#filters .routes-filter-view-btn:focus-visible,
#filters .routes-filter-create:focus-visible {
  border-color: var(--color-border-muted);
  color: var(--color-selected);
}

#filters .routes-filter-icon {
  display: block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

#filters .routes-filter-view-icon {
  mask-image: url("/nimbus-icons/toolbar-list.svg");
}

#filters .routes-filter-create-icon {
  mask-image: url("/nimbus-icons/toolbar-route-add.svg");
}

.routes-filter-actions {
  --filter-actions-gap: 10px;
}

#filters .routes-filter-view-btn.is-pressed {
  background-color: rgba(66, 133, 244, 0.05);
  color: rgb(66, 133, 244);
}

#filters .routes-filter-create {
  border-color: transparent;
  background-color: rgb(50, 167, 84);
  color: #fff;
}

#filters .routes-filter-create:hover,
#filters .routes-filter-create:focus-visible {
  border-color: transparent;
  background-color: rgb(43, 151, 74);
  color: #fff;
}

#filters .routes-filter-create:disabled {
  border-color: rgba(153, 157, 168, 0.25);
  background-color: rgba(153, 157, 168, 0.1);
  color: rgba(153, 157, 168, 0.7);
  cursor: default;
}

.routes-filter-search {
  order: 3;
  margin-inline-start: 0;
}

.routes-filter-view-btn {
  order: 1;
}

.routes-filter-create {
  order: 2;
}

.runs-topbar {
  --filters-main-gap: 20px;
}

#filters .nimbus-runs-select {
  min-width: 220px;
  justify-content: space-between;
  padding: 0 0 0 10px;
  line-height: normal;
}

#filters .nimbus-runs-transport {
  width: 62px;
  justify-content: space-between;
  gap: 0;
  padding: 0 0 0 10px;
  line-height: normal;
}

#filters .nimbus-runs-transport-icon,
#filters .nimbus-runs-dropdown-icon {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  flex: 0 0 var(--size-icon-md);
}


#filters .nimbus-runs-date {
  position: relative;
  display: block;
  width: 220px;
  justify-content: flex-start;
  gap: 0;
  padding: 9px 10px 7px;
  color: var(--color-text-primary);
  font-size: 14px;
  line-height: normal;
}

#filters .nimbus-runs-date-native {
  width: 0;
  height: 0;
  opacity: 0;
}

#filters .nimbus-runs-date-icon {
  position: absolute;
  top: 9px;
  right: 10px;
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: rgba(153, 157, 168, 0.7);
  mask-image: url("/icons/runs/calendar.svg");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

#filters .nimbus-runs-date:hover .nimbus-runs-date-icon {
  background-color: #999da8;
}

#filters .nimbus-runs-statuses {
  height: 36px;
  border: 1px solid rgba(153, 157, 168, 0.4);
  border-radius: 4px;
}

#filters .nimbus-runs-status-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 34px;
  min-width: 0;
  gap: 5px;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
}

#filters .nimbus-runs-status-btn + .nimbus-runs-status-btn {
  border-left: 1px solid rgba(153, 157, 168, 0.4);
}

#filters .nimbus-runs-status-btn.active {
  color: var(--color-text-primary);
  background: rgba(66, 133, 244, 0.05);
}

#filters .nimbus-runs-status-img {
  width: 18px;
  height: 18px;
}

#filters .nimbus-runs-dropdown-icon.transport-icon,
#filters .nimbus-runs-transport-icon.transport-icon {
  display: inline-block;
  background-color: currentColor;
  color: var(--color-text-muted);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

#filters .nimbus-runs-transport-icon.transport-icon {
  color: var(--color-selected);
}

#filters .ui-filter-dropdown__option--selected .nimbus-runs-dropdown-icon {
  color: var(--color-selected);
}

#filters .nimbus-runs-dropdown-icon.transport-icon-bus,
#filters .nimbus-runs-transport-icon.transport-icon-bus {
  color: var(--color-primary);
  mask-image: url("/nimbus-icons/transport-bus.svg");
}

#filters .nimbus-runs-dropdown-icon.transport-icon-trolleybus,
#filters .nimbus-runs-transport-icon.transport-icon-trolleybus {
  color: var(--color-status-purple);
  mask-image: url("/nimbus-icons/transport-trolleybus.svg");
}

#filters .nimbus-runs-dropdown-icon.transport-icon-tram,
#filters .nimbus-runs-transport-icon.transport-icon-tram {
  color: var(--color-status-pink);
  mask-image: url("/nimbus-icons/transport-tram.svg");
}

#filters .nimbus-runs-dropdown-icon.transport-icon-route_taxi,
#filters .nimbus-runs-transport-icon.transport-icon-route_taxi {
  color: var(--color-warning);
  mask-image: url("/nimbus-icons/transport-route-taxi.svg");
}

#filters .nimbus-runs-dropdown-icon.transport-icon-no_type,
#filters .nimbus-runs-transport-icon.transport-icon-no_type {
  color: var(--color-status-steel);
  mask-image: url("/icons/runs/no-type.svg");
}