@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: 280px;
}
.calendar {
  background-color: var(--lighter-gray);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 4px;
  width: fit-content;
  box-shadow: none;
}

.singleDatePicker {
  padding: 8px;
  margin: auto; // To center the calendar in the drawer.
}

.rangeDatePicker {
  padding: 8px 8px 8px 0px;
  width: fit-content;
  margin: auto; // To center the calendar in the drawer.
  @media only screen and (max-width: var.$breakpoint-sm-max) {
    padding-bottom: 0px;
  }
}

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

.actionButtons {
  display: flex;
  flex-direction: row;
  color: var(--dark-blue);
  background-color: var(--lighter-gray);
  gap: 8px;
  overflow: auto;
  @media only screen and (max-width: var.$breakpoint-sm-max) {
    width: 100%;
    background-color: var(--white);
    color: var(--dark-purple);
  }
}

.actionButtonsInRange {
  margin-left: 8px;
}

.actionButtonsInSingle {
  width: var(--date-picker-calendar-width);
  @media only screen and (max-width: var.$breakpoint-sm-max) {
    width: 100%;
  }
}

.actionButton {
  background-color: transparent;
  border: none;
  font-size: var(--font-size-10);
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  margin: 8px 0 0 0;
  transition: background-color 0.25s ease-in-out;
  &:disabled {
    background-color: transparent;
    border: none;
  }
  &:hover {
    background-color: var(--medium-blue);
    box-shadow: none;
  }
}

.caretButton {
  margin-left: 8px;
  @media only screen and (max-width: var.$breakpoint-sm-max) {
    margin-left: 0px;
  }
}

.selectedAction {
  background-color: var(--dark-blue);
  color: var(--white);
  &:hover {
    background-color: var(--dark-blue);
    box-shadow: none;
  }
}

.labelButton {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: var(--font-size-12);
  background-color: var(--white);
  text-transform: none;
  border-radius: 4px;
  font-family: 'Wix Madefor Display';
  font-weight: var(--font-weight-regular);
  justify-content: space-between;
}

.singleWithLabel {
  min-width: max-content;
}

.rangeWithLabel {
  min-width: 200px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

input.paddingWithLabel {
  width: calc(
    100% - 40px
  ); // adjusting padding and width to fit the calendar icon.
  padding-right: 28px; // 16px calendar icon + 12px padding
}

input.extraPadding {
  width: calc(100% - 68px);
  padding-right: 56px;
}

.withoutLabel {
  width: 50px;
}

.labelButton .inputWithoutLabel {
  width: 50px;
  padding-left: 0px;
}

.inputBox {
  width: 100%;
}

.disabledIcon {
  cursor: default;
}

.errorText {
  color: var(--dark-red);
  margin-top: 8px;
  font-size: var(--font-size-12);
}

.divider {
  height: 24px;
  width: 1px;
  background-color: var(--medium-purple);
}

.iconsContainer {
  position: absolute;
  right: 8px;
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.iconsContainerWithLabel {
  top: 32px;
}
.DatePickerPopover {
  width: fit-content;
}

.mobileDrawerInput {
  width: calc(var(--date-picker-calendar-width) + 16px);
  margin: auto;
  margin-bottom: 8px;
}

.resetButtonContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.resetButtonDivider {
  margin-top: 8px;
  height: 24px;
  width: 1px;
  background-color: var(--medium-purple);
}

input.focused {
  border: 1px solid var(--dark-blue);
}