.container {
  --color-bg-inrange: var(--theme-accent-muted);
  --color-bg-default: var(--theme-bg-color);
  --color-bg-secondary: var(--theme-bg-color);
  --color-fg-default: var(--theme-fg-color);
  --color-fg-primary: var(--theme-accent-color);
  --color-fg-secondary: var(--theme-fg-muted);
  --color-fg-selected: var(--theme-bg-color);
  --color-fg-muted: var(--theme-fg-muted);
  --color-fg-accent: var(--theme-accent-color);
  --color-border-default: var(--theme-bg-muted);
  --color-border-locked: var(--theme-bg-muted);

  /* easepick's Apply/Cancel button palette (--color-btn-*) is intentionally
     left at the gem defaults: this picker auto-applies on select-and-click, so
     those buttons never render. Theme them here if that ever changes. */

  --day-width: 42px;
  --day-height: 37px;
  --border-radius: var(--border-radius);
}

.container {
  font-family: inherit;
  /* 1px hairline to match the lightened combobox dropdown (see
     _hotwire_combobox_overrides.css), not the heavier 2px field borders. */
  border: var(--tag-border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  transition: none;
  /* easepick measures a hidden .container.calc and locks a content-based width,
     so its own .container{width:100%} never wins. Reassert it so the popover
     spans the field instead of hugging its content. */
  width: 100% !important;
  box-sizing: border-box;
  /* Drop the popup flush against the field underline — easepick positions it
     overlapping up into the field by the wrapper's padding-bottom + border.
     Same offset the combobox dropdown uses, so both popups align identically. */
  margin-top: calc(var(--gap-small) + var(--border-width) - 1px);
}

/* With the container now full-width, stretch the inner layout to fill it: the
   two-month grid grows into the space left of the fixed preset column rather
   than clustering at min-content. Day cells are already fluid (1fr columns). */
.preset-plugin > main {
  width: 100%;
}

.calendars {
  flex: 1 1 auto;
  min-width: 0;
}

/* Fluid day cells (as in easepick's own <480px layout) so the two months fill
   the field width set on the wrapper (see datepicker.css), instead of a fixed
   42px/day that would over- or under-shoot it. */
.calendars .calendar > .days-grid > .day {
  width: auto;
  min-width: 0;
  max-width: none;
}

.calendar > .days-grid > .day {
  border-radius: var(--border-radius);

  &:hover {
    color: var(--theme-accent-color);
    border: var(--border-width) solid var(--theme-accent-color);
  }

  &.today {
    font-weight: bold;
    color: inherit;
    text-decoration: underline;
  }
}

.container.range-plugin {
  .calendar > .days-grid > .day.in-range {
    color: var(--theme-bg-color);
  }
}

.container.preset-plugin main.preset-left .preset-plugin-container {
  width: 100%;
}

.preset-plugin-container {
  justify-content: space-between;
  gap: var(--gap-medium);

  button {
    background-color: var(--theme-bg-muted);
    border: var(--border-width) solid var(--theme-bg-color);
    border-radius: var(--border-radius);

    &:hover {
      border: none;
      border: var(--border-width) solid var(--theme-bg-color);
      color: var(--theme-fg-color);
    }

    &.preset-button {
      flex-grow: 1;
    }
  }

}