/* The filter bar above the patient chart's orders list: the search box, the
   date range and the order types, all in one GET form. */

.orders-filters--bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--rem-12);
}

.orders-filters--group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--rem-8);
}

/* The search component sizes itself off its padding; the bar wants it the same
   height as the dropdown triggers beside it. */
.orders-filters--bar .inputs--custom-search {
  width: 17rem;
  height: var(--rem-32);
  padding-block: 0;
}

/* The calendar is taller than a menu of options, so it is not scrolled. */
.orders-filters--date-menu {
  max-height: unset;
}

/* The calendar stands in for the range list rather than sitting under it, so it
   carries its own way back. */
.orders-filters--date-custom {
  display: flex;
  flex-direction: column;
}

.orders-filters--date-back {
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--rem-24);
  height: var(--rem-24);
  margin: var(--rem-8) 0 0 var(--rem-8);
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.orders-filters--date-back:hover {
  background-color: var(--surface-secondary);
}