/* The two-click day range picker: a month grid whose ends are the picked days
   and whose middle is shaded. Borrows the week picker's proportions. */

.date-range-picker {
  display: flex;
  flex-direction: column;
  gap: var(--rem-8);
  padding: var(--rem-12);
}

.date-range-picker--month-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rem-8);
  padding: 0 var(--rem-4);
}

.date-range-picker--month-title {
  font-size: var(--rem-14);
  font-variation-settings: 'wght' var(--text-medium);
  color: var(--text-body);
  text-wrap: nowrap;
}

.date-range-picker--month-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--rem-24);
  height: var(--rem-24);
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.date-range-picker--month-arrow:hover {
  background-color: var(--surface-secondary);
}

.date-range-picker--weekdays,
.date-range-picker--grid {
  display: grid;
  grid-template-columns: repeat(7, var(--rem-32));
  gap: var(--rem-2);
}

.date-range-picker--weekday {
  text-align: center;
  padding: var(--rem-4) 0;
  font-size: var(--text-2xs);
  font-variation-settings: 'wght' var(--text-semibold);
  color: var(--text-additional);
  text-transform: uppercase;
}

.date-range-picker--day {
  height: var(--rem-32);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--rem-13);
  color: var(--text-body);
  cursor: pointer;
}

.date-range-picker--day:hover {
  background-color: var(--surface-secondary);
}

.date-range-picker--day-outside {
  color: var(--text-disabled);
}

.date-range-picker--day-today {
  font-variation-settings: 'wght' var(--text-bold);
}

.date-range-picker--day-in-range {
  background-color: var(--surface-success);
  border-radius: 0;
  color: var(--text-success-hover);
}

.date-range-picker--day-selected,
.date-range-picker--day-selected:hover {
  background-color: var(--surface-action-active);
  color: var(--text-on-action);
  font-variation-settings: 'wght' var(--text-medium);
}

.date-range-picker--clear {
  align-self: flex-start;
  padding: 0;
  background: none;
  border: none;
  font-size: var(--rem-13);
  color: var(--text-action);
  cursor: pointer;
}