#app .calendar-date-menu {
  position: fixed;
  z-index: var(--layer-popover);
  inline-size: max-content;
  max-inline-size: calc(100vw - var(--space-300));
  text-align: start;

  & [data-component='date-picker'] {
    background-color: transparent;
  }

  & [data-slot='field'] [data-component='field'] {
    inline-size: 100%;
  }

  & [data-slot='field'] .field__input {
    cursor: default;
  }

  & .date-picker__day:hover:not([data-state='selected']) {
    box-shadow: inset 0 0 0 100vmax var(--state-hover);
  }
}

#app [data-picker] {
  cursor: pointer;
  caret-color: transparent;
}

#app [data-component='field']:has(> [data-slot='input'] > [data-picker]) {
  cursor: pointer;
}