@use '../../scss/base/variables' as var;

:root {
  // To make the UI consistent for each implementation, we are creating a variable for the DatePicker calendar width
  --date-picker-calendar-width-and-height: 280px;
}
.months {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
// To adjust the gaps between two months in range mode.
.twoMonthsGap {
  gap: 8px;
  @media only screen and (max-width: var.$breakpoint-sm-max) {
    // overriding the width of the range DatePicker in mobile view
    width: max-content;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 8px; // To have 8px padding by all sides. In mobile view, left side is handled specifically.
  }
}

.monthCaption {
  position: relative;
  margin: 0px 40px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.weekdays {
  display: flex;
  flex-direction: row;
}

.weekday {
  // This is the desired size of the weekday and dayButton elements.
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-regular);
  color: var(--dark-purple);
  text-transform: uppercase;
  font-family: 'Wix Madefor Display';
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.month {
  width: 100%;
  margin-bottom: 4px; // Needed for consistent spacing around all sides.
}

.captionLabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-12);
  color: var(--dark-blue);
  font-weight: var(--font-weight-bold);
  background-color: transparent;
  border: none;
  &:hover {
    background-color: var(--lighter-gray);
    box-shadow: none;
  }
}
.monthGrid button {
  // Month grid and year grid use this style. This is a common style for both. To match the total width of day grid, we decided to use 82px.
  width: 82px;
  height: 40px;
  border: none;
  border-radius: 4px;
  &:hover {
    background-color: var(--medium-blue);
    box-shadow: none;
  }
}
.rangeMonthGrid {
  margin-left: 8px;
}
.monthGrid .today {
  border: solid var(--dark-blue);
  border-radius: 4px;
}
.buttonNav {
  background-color: transparent;
  padding: 0;
  opacity: 0.5;
  &:hover {
    opacity: 1;
  }
}
.buttonPrevious {
  position: absolute;
  left: 0;
  top: 0;
  // Needed for consistent spacing around all sides.
  color: var(--dark-purple);
  border: none;
  &:hover {
    box-shadow: none;
    background-color: transparent;
  }
}

.buttonPreviousRange {
  margin-left: 8px;
}

.buttonNext {
  position: absolute;
  right: 0;
  top: 0;
  margin-right: 4px; // Needed for consistent spacing around all sides.
  color: var(--dark-purple);
  border: none;
  &:hover {
    box-shadow: none;
    background-color: transparent;
  }
}

.monthGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  border-radius: 4px;
  width: var(--date-picker-calendar-width-and-height);
  background-color: var(--white);
  padding: 8px;
  box-sizing: border-box;
  place-items: center;
}

.daysGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  width: 100%;
}
.week {
  display: flex;
  width: 280px;
}

.day {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: var(--font-size-12);
}

.dayButton {
  font-size: var(--font-size-12);
  // as per figma design.
  height: 40px;
  width: 40px;
  border: none;
  border-radius: 4px;
  gap: 8px; // figma design
  padding: 0;
  font-weight: var(--font-weight-regular);
  background-color: var(--white);
  color: var(--dark-purple);
  cursor: pointer;
  font-family: 'Wix Madefor Display';
  transition:
    background-color 0.25s,
    color 0.25s;
}

.week .selected .dayButton:hover {
  background-color: var(--dark-blue);
  color: var(--white);
}
.week .dayButton:hover {
  background-color: var(--medium-blue);
  color: var(--dark-purple);
}

.today {
  border: solid var(--dark-blue);
  border-radius: 4px;
}

// Today button already has a border, so we are removing the border after selecting the today button.
.todaySelected {
  border: none;
}

.today .dayButton {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.outside {
  &.today {
    border: none;
  }
  &.selected {
    background-color: transparent;
    border: none;
  }
}

.selectedYear,
.selectedMonth {
  background-color: var(--dark-blue);
  color: var(--white);
  &:hover {
    background-color: var(--dark-blue);
    color: var(--white);
  }
}

.outside .dayButton {
  color: var(--disabled-gray);
}

.selected .dayButton {
  background-color: var(--dark-blue);
  color: var(--white);
  border-radius: 4px;
}

.selected.disabled .dayButton,
.rangeStart.disabled .dayButton,
.rangeEnd.disabled .dayButton,
.week .rangeStart.disabled .dayButton:hover,
.week .rangeEnd.disabled .dayButton:hover {
  background-color: var(--dark-blue);
  color: var(--white);
  cursor: default;
}

// Override for range middle disabled dates to maintain medium-blue background
.week .rangeMiddle.disabled .dayButton:hover {
  background-color: var(--medium-blue);
}

.hidden {
  visibility: hidden;
  flex: 1;
}

.calendar table[role='grid'] {
  background-color: var(--white);
  max-width: var(--date-picker-calendar-width-and-height);
  -webkit-border-horizontal-spacing: 0px;
  border-radius: 4px;
  // Set height for exactly 6 weeks: 6 rows * 40px + 5 gaps * 8px = 280px
  height: var(--date-picker-calendar-width-and-height);
  margin-bottom: 4px;
  width: var(--date-picker-calendar-width-and-height);
  // Ensure the grid always shows 6 rows
  display: grid;
  grid-template-rows: repeat(6, 40px);
}

.rangeCalendar table[role='grid'] {
  @media only screen and (max-width: var.$breakpoint-sm-max) {
    padding-bottom: 4px;
  }
}

// Styles for range mode
.rangeStart {
  background-color: var(--dark-blue);
  border-radius: 4px 0 0 4px;
}
.onlyStartSelected {
  border-radius: 4px;
}
.rangeEnd {
  background-color: var(--dark-blue);
  border-radius: 0 4px 4px 0;
}
.rangeMiddle .dayButton {
  background-color: var(--medium-blue);
  color: var(--dark-purple);
  border: none;
  border-radius: 0px;
  &:hover {
    background-color: var(--light-blue);
    color: var(--dark-purple);
  }
}

.hideFooter {
  display: none;
}

.disabled .dayButton {
  cursor: default;
  color: var(--gray);
}

.week .disabled .dayButton:hover {
  background-color: transparent;
  color: var(--gray);
}

.outside .dayButton {
  color: var(--gray);
  background-color: var(--white);
  border: none;
  border-radius: 0px;
}

.restrictedMonth,
.restrictedYear {
  cursor: default;
  color: var(--gray);
  pointer-events: none;
  &:hover {
    background-color: transparent;
    color: var(--gray);
  }
}

.monthGrid .rangeStartYear,
.monthGrid .rangeStartMonth,
.monthGrid .rangeEndYear,
.monthGrid .rangeEndMonth {
  background-color: var(--dark-blue);
  color: var(--white);
  border-radius: 4px 0 0 4px;
}

.monthGrid .rangeStartYear:hover,
.monthGrid .rangeStartMonth:hover,
.monthGrid .rangeEndYear:hover,
.monthGrid .rangeEndMonth:hover,
.monthGrid .sameMonthYear:hover,
.monthGrid .sameMonthMonth:hover {
  background-color: var(--dark-blue);
  color: var(--white);
}

.monthGrid .rangeMiddleYear,
.monthGrid .rangeMiddleMonth {
  background-color: var(--medium-blue);
  color: var(--dark-purple);
  border-radius: 0;
}

.monthGrid .rangeMiddleYear:hover,
.monthGrid .rangeMiddleMonth:hover {
  background-color: var(--dark-blue);
  color: var(--white);
}

.monthGrid .sameMonthYear,
.monthGrid .sameMonthMonth {
  background-color: var(--dark-blue);
  color: var(--white);
  border-radius: 4px;
}