@use "../../config" as *;
@use "../../motion" as *;
@use "../../theme" as *;
@use "../../spacing" as *;
@use "../../type" as *;
@use "../../utilities/component-reset";
@use "../../utilities/convert" as *;
@use "../../utilities/focus-outline" as *;
@use "../../utilities/high-contrast-mode" as *;
@use "../../utilities/placeholder-colors" as *;
@use "../../utilities/skeleton" as *;
@use "../../utilities/input-base" as *;

@use "./react-datepicker/datepicker.scss" as *;

/// Date picker styles
/// @access public
/// @group date-picker

$datepicker__background-color: $background !default;
$datepicker__border-color: #aeaeae !default;
$datepicker__highlighted-color: #3dcc4a !default;
$datepicker__muted-color: $text-body-secondary !default;
$datepicker__selected-color: #216ba5 !default;
$datepicker__text-color: $text-body-default !default;
$datepicker__header-color: $text-body-default !default;
$datepicker__navigation-disabled-color: lighten(
  $datepicker__muted-color,
  10%
) !default;

$datepicker__border-radius: 0rem !default;
$datepicker__day-margin: 0.166rem !default;
$datepicker__font-size: 0.8rem !default;
$datepicker__item-size: 1.7rem !default;
$datepicker__margin: 0.4rem !default;
$datepicker__navigation-button-size: 32px !default;
$datepicker__triangle-size: 8px !default;

@mixin date-picker-new {
  /* Date  Picker */
  .#{$prefix}--date-picker {
    display: inline-flex;
  }

  .#{$prefix}--date-picker__arrow {
    width: 0.8em;
    height: auto;
    margin: 0 0.7em;
    //color: $form-field-border; //$field-border;
  }
  .#{$prefix}--date-picker__input {
    position: relative;
    input {
      min-width: 10em !important;
      max-width: 10em !important;
      @include input-base;
    }
  }
  .#{$prefix}--date-picker__icon {
    position: absolute;
    top: 0.75em;
    right: 0.7em;
    width: 0.9em;
    height: auto;
    pointer-events: none;
    color: $action-default-fill-primary-default;
  }

  /* Date Range Picker */
  .#{$prefix}--date-ranger-picker {
    display: inline-flex;
  }

  .#{$prefix}--date-ranger-picker__arrow {
    width: 0.8em;
    height: auto;
    margin: 0 0.7em;
    //color: $form-field-border; //$field-border;
  }
  .#{$prefix}--date-ranger-picker__input {
    position: relative;
    input {
      min-width: 10em !important;
      max-width: 10em !important;
      @include input-base;  
      //padding-left: 2.5em;
    }
  }
  .#{$prefix}--date-ranger-picker__icon {
    position: absolute;
    top: 0.75em;
    right: 0.7em;
    width: 0.9em;
    height: auto;
    pointer-events: none;
    color: $action-default-fill-primary-default;
  }
}