@import '../../../scss/styles';

$cal-icon-width: 18px;

.date-time-picker {

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box,
  .react-datepicker__time-container {
    width: 120px;
  }

  &__icon-wrap {
    position: relative;
    z-index: 1;
  }

  .icon--calendar,
  &__clear-button {
    position: absolute;
  }

  .icon--calendar,
  .icon--x {
    @include color-svg(var(--theme-elevation-800));
    height: auto;
  }

  &__clear-button {
    top: base(.5);
    right: base(2);
  }

  .icon--calendar {
    top: base(.625);
    right: base(.75);
    width: $cal-icon-width;
    pointer-events: none;
  }

  .icon--x {
    width: base(1);
  }

  &__clear-button {
    appearance: none;
    background-color: transparent;
    border: none;
    outline: none;
    padding: 0;
    cursor: pointer;
  }

  &__appearance--timeOnly {
    .react-datepicker {
      width: 100%;

      &__month-container,
      &__navigation--previous,
      &__navigation--next {
        display: none;
        visibility: hidden;
      }

      &-popper,
      &__time-container,
      &__time-box {
        width: base(6);
      }

      &__time-container {
        .react-datepicker__time {
          .react-datepicker__time-box {
            width: 100%;
          }
        }
      }
    }
  }

  .react-datepicker-wrapper {
    display: block;
  }

  .react-datepicker-wrapper,
  .react-datepicker__input-container {
    width: 100%;
  }

  .react-datepicker__input-container input {
    @include formInput;
    padding-right: calc(#{base(.75)} + #{$cal-icon-width});
  }

  &--has-error {
    .react-datepicker__input-container input {
      background-color: var(--theme-error-200);
    }
  }

  .react-datepicker {
    @include shadow-lg;
    background: var(--theme-input-bg);
    display: inline-flex;
    border: none;
    font-family: var(--font-body);
    font-weight: 100;
    border-radius: 0;
    color: var(--theme-elevation-800);

    &__header {
      padding-top: 0;
      text-transform: none;
      text-align: center;
      border-radius: 0;
      border: none;
      background-color: var(--theme-input-bg);

      &--time {
        padding: 10px 0;
        border-bottom: 1px solid var(--theme-elevation-150);
        font-weight: 600;
      }
    }

    &__navigation {
      background: none;
      line-height: 1.7rem;
      text-align: center;
      cursor: pointer;
      position: absolute;
      top: 10px;
      width: 0;
      padding: 0;
      border: 0.45rem solid transparent;
      z-index: 1;
      height: 10px;
      width: 10px;
      text-indent: -999em;
      overflow: hidden;
      top: 15px;

      &--next {
        border-left-color: var(--theme-elevation-400);

        &:focus {
          border-left-color: var(--theme-elevation-500);
          outline: none;
        }
      }

      &--previous {
        border-right-color: var(--theme-elevation-400);

        &:focus {
          border-right-color: var(--theme-elevation-500);
          outline: none;
        }
      }
    }

    &__current-month,
    &__header,
    &-year-header,
    &__day-name,
    &__day,
    &__time-name,
    &-time__header {
      color: var(--theme-elevation-1000);
    }

    &__current-month {
      padding: 10px 0;
      font-weight: 600;
    }

    &__month-container {
      border-right: 1px solid var(--theme-elevation-150);
    }

    &__time {
      background: none;
    }

    &__time-container {
      border-left: none;
    }


    &__day-names {
      background-color: var(--theme-elevation-100);
    }

    &__day {
      box-shadow: inset 0px 0px 0px 1px var(--theme-elevation-150);
      font-size: base(.55);

      &:hover {
        background: var(--theme-elevation-100);
      }

      &:focus {
        outline: 0;
        background: var(--theme-elevation-400);
      }

      &--selected {
        font-weight: bold;

        &:focus {
          background-color: var(--theme-elevation-150);
        }
      }

      &--keyboard-selected {
        color: var(--theme-elevation-0);
        font-weight: bold;

        &:focus {
          background-color: var(--theme-elevation-150);
          box-shadow: inset 0px 0px 0px 1px var(--theme-elevation-800), 0px 0px 0px 1px var(--theme-elevation-800);
        }
      }

      &--today {
        font-weight: bold;
      }
    }

    &__day,
    &__day-name {
      width: base(1.5);
      margin: base(.15);
      line-height: base(1.25);
    }
  }

  .react-datepicker-popper {
    z-index: 10;
    border: none;
  }

  .react-datepicker__day--keyboard-selected,
  .react-datepicker__month-text--keyboard-selected,
  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
    box-shadow: none;
    background-color: var(--theme-elevation-150);
    font-weight: bold;
    color: var(--theme-elevation-800);
    border-radius: 0;
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected,
  .react-datepicker__day--selected,
  .react-datepicker__day--in-selecting-range,
  .react-datepicker__day--in-range,
  .react-datepicker__month-text--selected,
  .react-datepicker__month-text--in-selecting-range,
  .react-datepicker__month-text--in-range {
    box-shadow: none;
    background-color: var(--theme-elevation-150);
    color: var(--theme-elevation-800);
    font-weight: bold;
    border-radius: 0;
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
    background: var(--theme-elevation-100);
  }

  .react-datepicker__day:hover,
  .react-datepicker__month-text:hover {
    border-radius: 0;
  }

  .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
    right: 130px;
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
    line-height: 20px;
    font-size: base(.5);
  }

  @include small-break {
    &__input-wrapper {
      .icon {
        top: calc(50% - #{base(.25)});
      }
    }
  }
}