@import "../properties.css";

.wrap {
  position: relative;
  max-width: 375px;
}

.datePickerWrap {
  position: absolute;
  top: calc(100% - var(--spacing-3));
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 16px;
  z-index: 1;
}

.datePickerWrap :global(.react-datepicker) {
  border-radius: 3px;  
  border: 1px solid var(--color-grey-400);
  font-family: var(--font-family-noto-sans);
}

.datePickerWrap :global(.react-datepicker__header) {
  border-bottom: 1px solid var(--color-grey-400);
  background-color: var(--color-grey-200);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.datePickerWrap :global(.react-datepicker__day-name),
.datePickerWrap :global(.react-datepicker__day),
.datePickerWrap :global(.react-datepicker__time-name) {
  width: 36px;
}

.datePickerWrap :global(.react-datepicker__current-month),
.datePickerWrap :global(.react-datepicker__day-name) {
  text-transform: uppercase;
  color: var(--color-default);
}

.datePickerWrap :global(.react-datepicker__day--selected) {
  background-color: var(--color-accent);
  color: var(--color-white);
  border-radius: 3px;
}

.datePickerWrap :global(.react-datepicker__day:hover) {
  background-color: var(--color-accent);
  color: var(--color-white);
}