/*
 * @copyright   Copyright (C) 2022 AesirX. All rights reserved.
 * @license     GNU General Public License version 3, see LICENSE.
 */

@import 'react-datepicker/dist/react-datepicker.css';
@import '../../scss/utils/bootstrap.scss';

.date-picker {
  .react-datepicker__input-container {
    input {
      height: 40px;
      &:read-only {
        background-color: $gray-300;
      }
    }
  }
}
.calendar-icon {
  z-index: 1;
  pointer-events: none;
}
.calendar-icon-start {
  left: 12px;
}

.date-picker {
  .react-datepicker-ignore-onclickoutside {
    &:focus {
      outline: none;
    }
  }

  .react-datepicker-popper[data-placement^='bottom'] {
    margin-top: 5px;
  }

  .react-datepicker {
    padding: 0 16px 16px 16px;
    vertical-align: middle;
    display: flex;
  }

  .react-datepicker__header {
    background-color: transparent;
    border-bottom-color: #e8e9ec;
  }

  .react-datepicker__month-container {
    margin-right: 20px;

    &:last-child {
      margin-right: 0;
    }
  }

  .react-datepicker__current-month {
    font-family: $font-family-sans-serif;
    color: $color-blue;
  }

  .react-datepicker__day-name,
  .react-datepicker__day,
  .react-datepicker__time-name {
    color: rgba($color: $color-blue, $alpha: 0.8);
    font-family: $font-family-sans-serif;
  }

  .react-datepicker__year-read-view--down-arrow,
  .react-datepicker__month-read-view--down-arrow,
  .react-datepicker__month-year-read-view--down-arrow,
  .react-datepicker__navigation-icon::before {
    top: 12px;
    border-width: 2px 2px 0 0;
  }
  .react-datepicker__close-icon {
    right: 0;
  }
  .react-datepicker__navigation--next--with-time:not(
      .react-datepicker__navigation--next--with-today-button
    ) {
    right: 110px;
  }
}