@import '../../global';
@import '../../mixins/actionable';
@import '../../mixins/typography';
@import './overrides.scss';
@import '~react-datepicker/dist/react-datepicker.css';

.datepicker {
  &__input {
    @include actionable;

    width: auto;

    padding-right: $padding-lg;

    display: inline-flex;
    justify-content: flex-start;
    align-items: center;

    cursor: pointer;

    color: color('gray');

    &__selected,
    &:focus {
      @include focus;
    }

    &__hasValue {
      color: color('black');
    }

    &__block {
      width: 100%;
      max-width: none;
    }
  }

  &__container {
    z-index: 99;
    background: color('white');

    border: $border-default color('gray') !important;
    border-radius: $border-radius;

    padding: $padding;

    width: 85vw;
    max-width: 400px;

    &__time {
      border-right: 0px !important;
      border-top-right-radius: 0px !important;
      border-bottom-right-radius: 0px !important;
    }
  }

  &__calendar_header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    &_row {
      display: inline-flex;
      justify-content: center;
      align-items: center;

      width: 100%;
    }

    &__view {
      position: relative;

      margin: 0px $push-sm;

      cursor: pointer;

      &_container {
        cursor: default;

        z-index: 1;
        position: absolute;

        top: $push * 3;

        padding: $padding-sm;

        border: $border-default color('gray');
        border-radius: $border-radius;

        background: color('white');

        display: grid;
        grid-template-columns: repeat(3, 1fr);

        &__item {
          cursor: pointer;

          box-sizing: border-box;
          border: $border-default;
          border-radius: $border-radius;
          border-color: transparent;

          padding: $padding;

          &:hover {
            background-color: color('gray', 0.75);
            border-color: color('gray');
          }

          &__selected {
            background-color: color('gray', 0.75);
            border-color: color('primary');
          }
        }
      }
    }
  }
}