@import 'public-booking/main_dependencies';
@import '../calendar';

@mixin month-calendar-base() {
  display: block;
  min-height: $bb-empty-component-loader-height;

  @include calendar;

  .month-calendar__heading {
    border: 1px $bb-table-border-color solid;
    border-bottom: none;
  }

  .calendar__day {
    height: 70px;

    position: relative;
    cursor: pointer;
    font-weight: 300;

    &--not-available, &--is-before {
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAH0lEQVQYV2NkQAXGjEh8YwYGhrMwATAHJAkSgHNAAgBPrgM4E7i5OwAAAABJRU5ErkJggg==) repeat;
      color: #9b9b9b;

      &:hover {
        cursor: not-allowed;
      }

    }

    &--is-today {
      font-weight: 600;
    }

    &--selected {
      color: $brand-primary;
      border: 2px solid $brand-primary;
      font-weight: 600;

      &:before {
        display: none;
      }
    }

    &--empty {
      border: none;
    }

    &--start-month {
      // this shows a line on left when a new month starts
      &:before {
        content: '';
        width: 2px;
        height: 100%;
        top: 0;
        left: -1px;
        background: #4a4a4a;
        position: absolute;
      }
    }
  }

  .calendar__month {
    // The table cell padding is 8, so +2 will result in 10 as the value position (listed below).
    margin-top: 2px;
  }

  .calendar__value {
    position: absolute;
    bottom: 10px;
    left: 10px;
  }

  .calendar__today {
    position: absolute;
    bottom: 10px;
    right: 15px;
  }

  .month-calendar__time-slots {
    margin-top: 40px;

    &__main-box {
      margin: 20px 0 20px 0;
    }

    &__slot {
      @include make-md-column(4);
    }

    &__h5 {
      // It looks slightly better when header is not perfectly aligned with select input.
      padding-left: 2px;
      margin-bottom: 5px;
    }

    &__heading-box {
      @include make-md-column(12);
    }

    &__heading {
      font-weight: $bb-font-weight-2;
      border-bottom: 2px solid #e0e0e0;
      padding-bottom: 15px;
    }
  }

}