:where(:root),
:where(:host) {
  --vaadin-date-picker-year-scroller-background: light-dark(var(--vaadin-background-container), transparent);
  --vaadin-date-picker-month-header-font-weight: var(--aura-font-weight-semibold);
  --vaadin-date-picker-date-selected-background: var(--aura-accent-color);
  --vaadin-date-picker-date-selected-color: var(--aura-accent-contrast-color);
  --vaadin-date-picker-date-width: round(var(--aura-base-font-size) / 16 * 2rem + var(--vaadin-padding-s), 2px);
  --vaadin-date-picker-date-height: round(var(--aura-base-font-size) / 16 * 2rem + var(--vaadin-padding-s), 2px);
  --vaadin-date-picker-year-scroller-width: round(
    var(--aura-base-font-size) / 16 * 3rem + var(--vaadin-padding-s),
    2px
  );
}

vaadin-date-picker-month-scroller,
vaadin-date-picker-overlay-content::part(toolbar) {
  background: var(--aura-surface-color);
}

vaadin-date-picker-year-scroller::before {
  width: 12px;
  height: 12px;
  background: var(--aura-surface-color-solid) padding-box;
}

vaadin-date-picker-year::part(year-number) {
  font-size: var(--aura-font-size-s);
  font-weight: var(--aura-font-weight-medium);
}

vaadin-date-picker-year[current]::part(year-number) {
  font-weight: var(--aura-font-weight-semibold);
}

vaadin-date-picker-year[selected] {
  position: relative;
}

vaadin-date-picker-year[selected]::part(year-number) {
  color: var(--aura-accent-text-color);
}

vaadin-date-picker-year[selected]::after {
  content: '';
  position: absolute;
  z-index: -1;
  height: 100%;
  background: var(--aura-accent-color);
  border-radius: var(--vaadin-radius-s);
  top: -0.5lh;
  inset-inline: 3px;
  opacity: 0.1;
}

vaadin-date-picker-year::part(year-separator) {
  text-align: center;
  translate: 0 -50%;
  height: 8px;
  line-height: 0;
}

vaadin-date-picker-year::part(year-separator)::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--vaadin-text-color-disabled);
}

vaadin-month-calendar::part(today) {
  font-weight: var(--aura-font-weight-semibold);
}

vaadin-month-calendar::part(today)::before {
  content: '';
  position: absolute;
  height: 1.75em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 7%, transparent);
}

vaadin-month-calendar::part(selected)::before {
  content: none;
}

vaadin-month-calendar::part(date):hover::after {
  background: var(--_aura-highlight-color);
}

vaadin-month-calendar::part(date disabled):hover::after {
  background: transparent;
}

vaadin-month-calendar::part(date selected) {
  color: var(--aura-accent-contrast-color);
}

vaadin-month-calendar::part(date selected):hover::after {
  background: var(--aura-accent-color);
}