/* easepick makes .easepick-wrapper position:absolute with no width, so its
   popover only ever sizes to its content (overflowing right) or collapses to
   nothing. Give the wrapper the field width — its containing block is the
   position:relative .datepicker below — and pin it left so the popover drops
   straight under the field at the field's width, like the combobox dropdowns. */
.easepick-wrapper {
  width: 100% !important;
  left: 0 !important;
}

/* The calendar handle deliberately reuses the combobox handle vars
   (--hw-handle-offset-right, --filter-icon-size) so the date field's icon lines
   up identically with the What?/Where? combobox icons — intentionally shared,
   not a TODO to split apart. */
.datepicker {
  /* Containing block for the absolutely-positioned .easepick-wrapper above. */
  position: relative;

  .datepicker-handle {
    height: 100%;
    right: var(--hw-handle-offset-right);
    top: 0;
    width: var(--filter-icon-size);

    &::before {
      background-size: var(--filter-icon-size);
      position: initial;
      vertical-align: middle;
    }
  }
}