@import '../../global';
@import '../../mixins/typography';

@mixin datepicker_focus {
  @include focus;

  background-color: color('gray', 0.75) !important;
}

@mixin datepicker_selected {
  font-weight: bold;
  color: color('black') !important;

  background-color: color('primary', 2) !important;

  border: $border-default !important;
  border-color: color('primary') !important;
}

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

    &-popper {
      z-index: 99;
    }

    &__close-icon {
      position: absolute;
      padding: 0px;
  
      &::after {
        font-size: 20px !important;
        background-color: transparent !important;
        border: none !important;
  
        color: color('black') !important;
      }
    }
  
    &__header {
      background: none !important;
      border-bottom: 0px;
  
      &--time {
        border: none !important;
        padding: 0px !important;
      }
    }
  
    &__month {
      &-container {
        width: inherit;
        max-width: inherit;
      }
  
      &-wrapper {
        display: flex;
        justify-content: space-between;
      }
  
      &-text {
        @include action;
  
        padding: $padding;
  
        border: $border-default transparent;
  
        &:hover {
          @include focus;
        }
      }
  
      &--selected {
        @include datepicker_selected;
      }
    }
  
    &__week,
    &__day-names {
      width: inherit;
      max-width: inherit;
  
      text-align: initial;
  
      display: flex;
      justify-content: space-around;
    }
  
    &__day-names {
      @include action;
  
      text-align: center;
    }
  
    &__day {
      @include body;
  
      padding: $padding;
  
      border: $border-default;
      border-radius: 0px !important;
      border-color: transparent;
  
      margin: 0px;
  
      &:hover,
      &--in-selecting-range {
        @include datepicker_focus;
      }
  
      &--selected,
      &--keyboard-selected {
        @include datepicker_selected;
  
        &:hover {
          @include datepicker_focus;
        }
      }
  
      &--outside-month {
        color: color('gray');
      }
  
      &--disabled {
        cursor: not-allowed;
        color: color('gray');
  
        &:hover {
          border: 1px solid transparent !important;
          box-shadow: none !important;
          background-color: transparent !important;
        }
      }
  
      &--in-range {
        color: color('black');
  
        background-color: color('primary', 1.75);
        border-color: color('primary');
      }
    }
  
    &__time-container {
      position: absolute;
      right: -85px;
      top: -1px;
  
      background: color('white');
  
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
  
      border: $border-default color('gray');
      border-left: none !important;
      border-radius: $border-radius;
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
  
      padding: 0px;
      margin: 0px;
  
      height: 100%;
    }
  
    &__time-list {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
  
      height: auto;
  
      &-item {
        @include action_small;
  
        border: $border-default transparent;
        border-radius: $border-radius;
  
        padding: $padding-lg $padding-sm !important;
  
        display: flex;
        justify-content: center;
        align-items: center;
  
        box-sizing: border-box;
  
        &:hover {
          @include datepicker_focus;
        }
  
        &--selected {
          @include datepicker_selected;
        }
      }
    }
  }  
}