/* Pairs date and saved-screener controls without making either depend on the other. */
.screener-date-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-9);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: var(--border-width) solid var(--color-border);
}

@scope (.screener-date-controls) {
  > :is(.date-navigation, .filter-bar) {
    min-width: 0;
    margin-bottom: 0;
  }

  > .date-navigation {
    flex: 0 0 auto;
  }

  > .filter-bar {
    position: relative;
    width: 100%;
    max-width: 36rem;
    flex: 1 1 22rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  > .filter-bar::before {
    position: absolute;
    top: 50%;
    left: calc(-0.5 * var(--space-9));
    width: var(--border-width);
    height: var(--space-7);
    background: var(--color-border);
    content: "";
    transform: translate(-50%, -50%);
  }

  .filter-bar .field,
  .filter-bar select {
    width: 100%;
    min-width: 0;
  }

  .filter-bar select {
    height: var(--control-height);
    padding-block: 0;
    padding-inline: var(--space-5) var(--space-12);
  }
}

@media (max-width: 760px) {
  .screener-date-controls {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-6);
  }

  .screener-date-controls > :is(.date-navigation, .filter-bar) {
    width: 100%;
    max-width: none;
  }

  .screener-date-controls > .filter-bar {
    flex: 0 0 auto;
  }

  .screener-date-controls > .filter-bar::before {
    content: none;
  }
}