/* react-day-picker v9 overrides. The library is loaded without its own stylesheet,
   so this file supplies the whole visual treatment from our tokens. */
.rdp-root {
  --rdp-accent-color: var(--accent);
  --rdp-accent-background-color: var(--accent-soft);
  --rdp-day-height: 32px;
  --rdp-day-width: 32px;
  --rdp-day_button-height: 30px;
  --rdp-day_button-width: 30px;
  --rdp-day_button-border-radius: var(--r-1);
  --rdp-selected-border: none;
  --rdp-today-color: var(--accent-ink);
  --rdp-outside-opacity: 0.4;
  --rdp-disabled-opacity: 0.3;
  --rdp-weekday-opacity: 1;

  font-size: 13px;
  color: var(--ink-2);
}

.rdp-months {
  /* .rdp-nav is absolutely positioned against this box. */
  position: relative;
  display: flex;
  gap: 20px;
}

.rdp-month_caption {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.rdp-nav {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  height: 32px;
  gap: 2px;
}

.rdp-button_previous,
.rdp-button_next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--r-1);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;

  &:hover:not(:disabled) {
    background: var(--bg-sunken);
  }

  &:disabled {
    opacity: 0.3;
    cursor: default;
  }
}

.rdp-chevron {
  width: 14px;
  height: 14px;
  fill: currentcolor;
}

.rdp-weekday {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Structural rules the library's own stylesheet would otherwise supply. Without
   them the --rdp-* custom properties declared above would have nothing reading
   them and the grid would collapse to unsized table cells. */
.rdp-month_grid {
  border-collapse: collapse;
}

.rdp-day {
  width: var(--rdp-day-width);
  height: var(--rdp-day-height);
  text-align: center;
}

.rdp-outside {
  opacity: var(--rdp-outside-opacity);
}

.rdp-disabled:not(.rdp-selected) {
  opacity: var(--rdp-disabled-opacity);
}

.rdp-hidden {
  visibility: hidden;
}

.rdp-day_button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--rdp-day_button-width);
  height: var(--rdp-day_button-height);
  margin: 0;
  padding: 0;
  font: inherit;
  border: none;
  border-radius: var(--rdp-day_button-border-radius);
  background: transparent;
  color: inherit;
  cursor: pointer;

  &:hover {
    background: var(--bg-sunken);
  }
}

.rdp-disabled .rdp-day_button {
  cursor: default;

  &:hover {
    background: transparent;
  }
}

.rdp-today .rdp-day_button {
  font-weight: 600;
  color: var(--accent-ink);
}

.rdp-range_middle {
  background: var(--accent-soft);
}

.rdp-range_start .rdp-day_button,
.rdp-range_end .rdp-day_button {
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
}

.rdp-range_middle .rdp-day_button {
  background: transparent;
  color: var(--accent-ink);
}