@import '../../imports';

.date-range-picker {

  .side-by-side {
    display: flex;

    .date-range-input {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 0;
    }

    :not(:last-child) {
      margin-right: 8px;
    }
  }

  .calendar {
    padding-left: 4px;
    padding-right: 4px;

    .calendar-nav {
      margin-top: 18px;
      margin-bottom: 12px;
      text-align: center;
      line-height: 23px;
      user-select: none;

      .caret {
        position: absolute;
        top: 0;
        padding: 3px 3px;
        cursor: pointer;

        svg {
          width: 19px;

          path {
            fill: #777;
          }
        }

        &:hover {
          svg path {
            fill: #555;
          }
        }

        &.left {
          left: 0;
        }

        &.right {
          right: 0;
        }

        &.disabled {
          //pointer-events: none;
          //opacity: 0.4;
        }
      }
    }

    .week {
      display: flex;
      width: 100%;

      .day {
        flex-grow: 1;
        flex-basis: 0;
        text-align: center;
        height: 26px;
        line-height: 26px;
        cursor: pointer;
        user-select: none;

        &.label {
          color: #bbb;
          pointer-events: none;
        }

        &.value {
          &.selectable,
          &.selected {
            background: rgba($brand, 0.26);

            &.past:not(.selected-edge),
            &.future:not(.selected-edge) {
              color: #87acbf;
            }
          }

          &:hover:not(.selectable) {
            &:after {
              @include pin-full;
              content: '';
              pointer-events: none;
              background: rgba($black, 0.06);
            }

            &.beyond-max-range {
              &:after {
                background: rgba($black, 0.1);
              }
            }
          }

          &.beyond-max-range {
            &:after {
              @include pin-full;
              content: '';
              pointer-events: none;
              background: rgba($black, 0.05);
            }
          }

          &.past,
          &.future {
            color: #bbb;
          }

          &.selected-edge {
            background: $brand;
            color: $white;
          }
        }

        span.space {
          color: transparent;
        }
      }
    }
  }
}