.open-calendar__calendar-select__container {
  position: absolute;
  top: 100%;
  width: max-content;
  z-index: 1500;

  background-color: white;
  /* CJ - 2025-07-03 - '--ec-button-border-color' is defined by EventCalendar */
  /* FIXME - CJ - 2025-07-03 - I tried set the rule option 'allowUnknownVariables' to in 'eslint.config.mjs' but this made the config fail*/
  /* eslint-disable-next-line css/no-invalid-properties */
  border: 1px solid var(--ec-button-border-color);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 0.25rem;
}

.open-calendar__calendar-select__label {
  display: flex;
  align-items: baseline;
  gap: 5px
}

.open-calendar__calendar-select__color {
  border-radius: 50%;
  height: 0.75rem;
  width: 0.75rem;
}

/* HACK - CJ - 2025-07-03 - Added in order to make the `top: 100%` use the heigh of the parent and not of the window */
.open-calendar__calendar-select__parent {
  position: relative;
}

/* HACK - CJ - 2025-07-03 - Prevents the addition of the popup to affect the style of the button (as it is not the first child anymore */
.ec-button-group .ec-calendars:not(:first-child) {
  margin-left: 0;
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}