.datepicker-container {
  position: relative;
  .popper-options {
    border: none !important;
  }
  .datepicker-textfield {
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;

    .input-display {
      background: $light;

      .input-addon {
        padding-right: 8px;
      }

      input {
        font-weight: 500;
        color: $dark-grey;
        width: 100%;
      }
    }

    * {
      cursor: pointer;
    }
  }
}

.datepicker-card {
  padding: 0;
  min-width: 670px;
  // z-index: 100;
  // margin-top: 4px;

  .card-content {
    @include display-flex(flex-start, stretch);

    & > div {
      width: 100%;
    }
  }

  &__single {
    min-width: 472px;

    .okra-datepicker-container {
      width: 100%;
      padding: 32px 24px 24px;

      & > div {
        width: 100%;
      }

      .react-datepicker {
        &__month-container {
          width: 100%;
        }

        .okra-datepicker-header {
          justify-content: center;
        }

        &__day-names,
        &__week {
          @include display-flex();
        }

        &__day-names {
          border-top: 0;
          margin: 0 0 16px;
        }

        &__week {
          margin-bottom: 16px;
        }
      }
    }
  }
}

.datepicker-shortcuts {
  border-right: 1px solid $light-grey;
  width: 148px;
  flex: 0 0 148px;

  &__item {
    margin-top: 8px;
    height: 32px;
    @include display-flex(flex-start, center);
    position: relative;
    padding: 0 16px;
    cursor: pointer;

    &::before {
      content: "";
      background: $primary;
      width: 4px;
      height: 100%;
      position: absolute;
      left: 0;
      opacity: 0;
      transition: all ease-in-out 0.3s;
    }

    &:hover,
    &.active {
      &::before {
        opacity: 1;
      }
    }
  }
}

.okra-datepicker-container {
  padding: 32px 24px 48px;
  border-bottom: 1px solid $light-grey;
  @include display-flex(flex-start, flex-start);
}

.okra-datepicker {
  border: 0;
  width: 100%;

  * {
    &:focus {
      outline: unset;
      background: $white;
    }
  }

  &-day {
    @include full-circle(32px);
    @include display-flex(center, center);
    display: inline-flex;
    margin: 0;
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
  }

  &-header {
    @include display-flex(flex-start, center);

    .select-container {
      width: auto;

      &:first-child {
        margin-right: 20px;
      }

      .select-display {
        border: 0;
        height: auto;
        padding: 8px;

        p {
          margin-bottom: 0;
          font-weight: 600;
          color: $dark-grey;
        }

        &__dropdown {
          svg {
            width: 12px;

            path {
              fill: $dark-grey;
            }
          }
        }
      }

      &:hover,
      &.hover,
      &__focused {
        .select-display {
          background: $light;
        }
      }

      &__focused {
        .select-display {
          box-shadow: none;
        }
      }
    }

    &__month {
      min-width: 125px;
    }
  }

  .react-datepicker {
    &__header {
      background: transparent;
      border: 0;
      padding-top: 0;
    }

    &__week {
      margin-bottom: 8px;
    }

    &__day {
      @extend .okra-datepicker-day;

      &-names {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid $light-grey;
      }

      &-name {
        @include display-flex(center, center);
        display: inline-flex;
        width: 32px;
        height: 32px;
        margin: 0;
        font-size: 12px;
        line-height: 18px;
        font-weight: 400;
        color: $grey;
      }

      &--keyboard-selected {
        @extend .okra-datepicker-day;
        background: $white;
        color: $black;
      }

      &--in-selecting-range,
      &--in-range {
        border-radius: 0;
        background: $light;
        color: $black;

        &.react-datepicker__day--range-start {
          border-radius: 50% 0 0 50%;
        }

        &.react-datepicker__day--range-end {
          border-radius: 0 50% 50% 0;
        }
      }

      &--outside-month {
        opacity: 0;
        height: 0;
      }

      &--selected,
      &--range-start,
      &--range-end {
        .okra-datepicker-day {
          background: $primary;
          color: $white;
          border-radius: 50%;
        }
      }
    }
  }

  &__last {
    .okra-datepicker-header {
      justify-content: flex-end;
    }
  }
}

.datepicker-footer {
  @include display-flex(space-between, center);
  padding: 8px 16px;
  width: 100%;

  & > div {
    @include display-flex(flex-start, center);
  }

  &__time {
    @include display-flex(flex-start);

    & > * {
      display: flex;
      margin-right: 8px;
    }
  }

  &__inputs {
    .input-container {
      width: 144px;
      pointer-events: none;

      .input-display {
        height: 32px;
        padding: 8px;

        .input-addon__right {
          border: 0;
        }

        input {
          @include placeholder(32px);
        }
      }
    }

    &-separator {
      width: 8px;
      height: 1px;
      margin: 0 8px;
      background: $dark-grey;
      display: inline-block;
    }
  }

  &__actions {
    .button {
      margin-right: 8px;

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