// modify node_modules/vanillajs-datepicker/sass/datepicker-bs5
// and made it support bootstrap variable rules

.datepicker {
  // --#{$prefix}dp-color: #{$datepicker-color};
  --#{$prefix}dp-bg: #{$datepicker-bg};
  --#{$prefix}dp-shadow: #{$datepicker-shadow};
  --#{$prefix}dp-border-radius: #{$datepicker-border-radius};
  --#{$prefix}dp-title-bg: #{$datepicker-title-bg};
  --#{$prefix}dp-title-shadow: #{$datepicker-title-shadow};
  --#{$prefix}dp-footer-bg: #{$datepicker-footer-bg};
  --#{$prefix}dp-footer-shadow: #{$datepicker-footer-shadow};
  --#{$prefix}dp-cell-hover-color: #{$datepicker-cell-hover-color};
  --#{$prefix}dp-cell-hover-bg: #{$datepicker-cell-hover-bg};
  --#{$prefix}dp-cell-focus-color: #{$datepicker-cell-focus-color};
  --#{$prefix}dp-cell-focus-bg: #{$datepicker-cell-focus-bg};
  // --#{$prefix}dp-cell-highlight-bg: #{$datepicker-cell-highlight-bg};
  --#{$prefix}dp-cell-selected-bg: #{$datepicker-cell-selected-bg};
  --#{$prefix}dp-cell-selected-color: #{$datepicker-cell-selected-color};
  --#{$prefix}dp-cell-disabled-color: #{$datepicker-cell-disabled-color};
  --#{$prefix}dp-cell-siblings-color: #{$datepicker-cell-siblings-color};
  // --#{$prefix}dp-cell-siblings-selected-color: #{$datepicker-cell-siblings-selected-color};
  --#{$prefix}dp-cell-today-bg: #{$datepicker-cell-today-bg};
  --#{$prefix}dp-cell-today-color: #{$datepicker-cell-today-color};
  --#{$prefix}dp-cell-today-focus-bg: #{$datepicker-cell-today-focus-bg};
  --#{$prefix}dp-cell-range-color: #{$datepicker-cell-range-color};
  --#{$prefix}dp-cell-range-bg: #{$datepicker-cell-range-bg};
  --#{$prefix}dp-cell-range-between-bg: #{$datepicker-cell-range-between-bg};
  --#{$prefix}dp-cell-range-hover-bg: #{$datepicker-cell-range-hover-bg};
  // --#{$prefix}dp-cell-range-focus-bg: #{$datepicker-cell-range-focus-bg};

  width: min-content;
  margin-top: -1px;
  margin-bottom: -1px;
}

.datepicker:not(.active) {
  display: none;
}

.datepicker-dropdown {
  position: absolute;
  z-index: $zindex-dropdown;
}

.datepicker-dropdown.datepicker-orient-top {
  padding-top: 0;
  padding-bottom: 4px;
}

.datepicker-picker {
  display: flex;
  flex-direction: column;
  // color: var(--#{$prefix}dp-color);
  background-color: var(--#{$prefix}dp-bg);
  border-radius: var(--#{$prefix}dp-border-radius);
}

.datepicker-dropdown .datepicker-picker {
  box-shadow: var(--#{$prefix}dp-shadow);
}

.datepicker-main {
  flex: auto;
  padding: 2px;
}

.datepicker-footer {
  background-color: var(--#{$prefix}dp-footer-bg);
  box-shadow: var(--#{$prefix}dp-footer-shadow);
}

.datepicker-title {
  padding: .375rem .75rem;
  font-weight: 700;
  text-align: center;
  background-color: var(--#{$prefix}dp-title-bg);
  box-shadow: var(--#{$prefix}dp-title-shadow);
}

.datepicker-controls {
  display: flex;
}

.datepicker-header .datepicker-controls {
  padding: 2px 2px 0;
}

// since im using buttonClass: 'btn btn-link' to the option,
// then all class related to .datepicker-controls .btn are not used

// .datepicker-controls .btn {
//   background-color: #f60;
//   border-color: #fc0;
// }

// .datepicker-controls .btn:hover {
//   border-color: #dbe0e5;
//   background-color: #e2e6ea;
//   color: #000;
// }

// .datepicker-controls .btn:focus {
//   border-color: #dbe0e5;
//   box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
//   background-color: #e2e6ea;
//   color: #000;
// }

// .datepicker-controls .btn:disabled {
//   border-color: #f8f9fa;
//   background-color: #f8f9fa;
//   color: #000;
// }

// .datepicker-controls .btn:not(:disabled):active {
//   border-color: #d4dae0;
//   background-color: #dbe0e5;
//   color: #000;
// }

// .datepicker-controls .btn:not(:disabled):active:focus {
//   box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
// }

// .datepicker-header .datepicker-controls .btn {
//   font-weight: bold;
//   border-color: transparent;
// }

.datepicker-footer .datepicker-controls .btn {
  flex: auto;
  margin: calc(.375rem - 1px) .375rem;
  font-size: .875rem;
  border-radius: .25rem;
}

.datepicker-controls .view-switch {
  flex: auto;
}

.datepicker-controls .prev-button,
.datepicker-controls .next-button {
  flex: 0 0 14.2857142857%;
  padding-right: .375rem;
  padding-left: .375rem;
}

.datepicker-controls .prev-button.disabled,
.datepicker-controls .next-button.disabled {
  visibility: hidden;
}

.datepicker-view,
.datepicker-grid {
  display: flex;
}

.datepicker-view {
  align-items: stretch;
  width: 15.75rem;
}

.datepicker-grid {
  flex: auto;
  flex-wrap: wrap;
}

.datepicker .days {
  display: flex;
  flex: auto;
  flex-direction: column;
}

.datepicker .days-of-week {
  display: flex;
}

.datepicker .week-numbers {
  display: flex;
  flex: 0 0 9.6774193548%;
  flex-direction: column;
}

.datepicker .weeks {
  display: flex;
  flex: auto;
  flex-direction: column;
  align-items: stretch;
}

.datepicker span {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  user-select: none;
  border-radius: var(--#{$prefix}dp-border-radius);
}

.datepicker .dow {
  height: 1.75rem;
  font-size: .9375rem;
  font-weight: 700;
}

.datepicker .week {
  flex: auto;
  font-size: .875rem;
  // color: #dee2e6;
}

.datepicker-cell,
.datepicker .days .dow {
  flex-basis: 14.2857142857%;
}

.datepicker-cell {
  height: 2.25rem;
}

.datepicker-cell:not(.day) {
  flex-basis: 25%;
  height: 4.5rem;
}

.datepicker-cell:not(.disabled):hover {
  color: var(--#{$prefix}dp-cell-hover-color);
  cursor: pointer;
  background-color: var(--#{$prefix}dp-cell-hover-bg);
}

.datepicker-cell.focused:not(.selected) {
  color: var(--#{$prefix}dp-cell-focus-color);
  background-color: var(--#{$prefix}dp-cell-focus-bg);
}

.datepicker-cell.selected,
.datepicker-cell.selected:hover {
  font-weight: 600;
  color: var(--#{$prefix}dp-cell-selected-color);
  background-color: var(--#{$prefix}dp-cell-selected-bg);
}

.datepicker-cell.disabled {
  color: var(--#{$prefix}dp-cell-disabled-color);
}

.datepicker-cell.prev:not(.disabled),
.datepicker-cell.next:not(.disabled) {
  color: var(--#{$prefix}dp-cell-siblings-color);
}

// .datepicker-cell.prev.selected,
// .datepicker-cell.next.selected {
//   color: var(--#{$prefix}dp-cell-siblings-selected-color);
// }

.datepicker-cell.highlighted:not(.selected):not(.range):not(.today) {
  // background-color: var(--#{$prefix}dp-cell-highlight-bg);
  border-radius: 0;
}

.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover {
  background-color: var(--#{$prefix}dp-cell-hover-bg);
}

.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused {
  color: var(--#{$prefix}dp-cell-focus-color);
  background-color: var(--#{$prefix}dp-cell-focus-bg);
}

.datepicker-cell.today:not(.selected) {
  background-color: var(--#{$prefix}dp-cell-today-bg);
}

.datepicker-cell.today:not(.selected):not(.disabled) {
  color: var(--#{$prefix}dp-cell-today-color);
}

.datepicker-cell.today.focused:not(.selected) {
  background-color: var(--#{$prefix}dp-cell-today-focus-bg);
}

.datepicker-cell.range-end:not(.selected),
.datepicker-cell.range-start:not(.selected) {
  color: var(--#{$prefix}dp-cell-range-color);
  background-color: var(--#{$prefix}dp-cell-range-bg);
}

.datepicker-cell.range-end.focused:not(.selected),
.datepicker-cell.range-start.focused:not(.selected) {
  background-color: var(--#{$prefix}dp-cell-range-focus-bg);
}

.datepicker-cell.range-start:not(.range-end) {
  border-radius: var(--#{$prefix}dp-border-radius) 0 0 var(--#{$prefix}dp-border-radius);
}

.datepicker-cell.range-end:not(.range-start) {
  border-radius: 0 var(--#{$prefix}dp-border-radius) var(--#{$prefix}dp-border-radius) 0;
}

.datepicker-cell.range {
  background-color: var(--#{$prefix}dp-cell-range-between-bg);
  border-radius: 0;
}

.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover {
  background-color: var(--#{$prefix}dp-cell-range-hover-bg);
}

// .datepicker-cell.range.disabled {
//   color: var(--#{$prefix}dp-cell-disabled-color);
// }

// .datepicker-cell.range.focused {
//   background-color: var(--#{$prefix}dp-cell-range-focus-bg);
// }

// disabled cuz using .text-control

// .datepicker-input.in-edit {
//   border-color: #73acfe;
// }

// .datepicker-input.in-edit:focus,
// .datepicker-input.in-edit:active {
//   box-shadow: 0 0 0.25em 0.25em rgba(115, 172, 254, 0.2);
// }