/* This file is a heavy retheme of react-datepicker's Sass as of v1.4.0
** https://github.com/Hacker0x01/react-datepicker
*/


.euiDatePicker {
  display: block;

  .euiFormControlLayout {
    height: auto;
  }

  /**
   * Inline datepickers
   */

  &--inline {
    .euiFormControlLayout {
      width: fit-content;
      background-color: transparent;
      box-shadow: none;
      padding: 0;
    }
    // Extra specificity required to override .euiFormControlLayoutDelimited styles
    .euiFormControlLayoutDelimited .euiFormControlLayout__childrenWrapper {
      background-color: transparent;
      flex-direction: column; // Render form control icons below date picker
    }
    .euiFormControlLayoutIcons {
      justify-content: center;
      padding-block-end: $euiSizeS;
    }
  }

  &--shadow {
    .euiFormControlLayout {
      @include euiBottomShadowMedium;
    }
    // Extra specificity required to override .euiFormControlLayoutDelimited styles
    .euiFormControlLayoutDelimited .euiFormControlLayout__childrenWrapper {
      background-color: $euiColorEmptyShade;
    }
  }
}

.react-datepicker {
  font-size: $euiFontSizeXS;
  color: $euiTextColor;
  display: flex;
  border-radius: $euiBorderRadius;
  padding: $euiDatePickerPadding;
  justify-content: center;
}

.react-datepicker--non-interactive {
  pointer-events: none;
}

// Hidden things that we don't want to show/use, ever
.react-datepicker__current-month,
.react-datepicker-time__header {
  display: none;
}

.react-datepicker__screenReaderOnly {
  @include euiScreenReaderOnly;
}

.react-datepicker__focusTrap {
  display: flex;
  justify-content: center;
}

.react-datepicker__month-container {
  flex-grow: 1;
  margin-top: $euiSizeXL + $euiDatePickerGap;
}

.react-datepicker__header {
  display: flex;
  flex-direction: column;
}

.react-datepicker-time__header {
  @include euiTextTruncate;
}

.react-datepicker__month {
  text-align: center;
  border-radius: $euiBorderRadius;
}

// On small screens put the times at the bottom
@include euiBreakpoint('xs') {
  .react-datepicker__focusTrap,
  .react-datepicker {
    flex-direction: column;
  }

  .react-datepicker__time-box {
    margin-top: 0;
  }
}