@import "../../../../theme/fluster-variables";
@import "../../../../theme/media-queries";
@import "../../../../theme/mixins";

div.date-picker-scroller {
  div.date-picker {
    div.appointment-empty {
      opacity: 0.4;
    }

    div.disabled-date {
      color: $fluster-medium-grey;
    }
  }
}

#datePickerScrollY {
  height: 46%;

  @include ipad {
    height: 40%;
  }

  ion-list {
    margin-bottom: 0;

    ion-item {

      p {
        font-size: $fluster-text-big;
        color: $fluster-midnight-blue;

        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;

        &.appointment-selected {
          color: $fluster-peach3;
          font-weight: $font-weight-normal;
        }

        &.appointment-in-the-past, &.appointment-already-taken, &.appointment-selected.appointment-already-taken, &.appointment-selected.appointment-in-the-past.appointment-already-taken {
          color: $fluster-medium-grey;
          opacity: 0.4;
        }

        ion-icon {
          vertical-align: middle;
          margin-right: 8px;
          font-size: 3rem;
        }
      }
    }
  }
}

@include iphone4 {
  #datePickerScrollY {
    height: 32%;
  }

  #countSelectedAppointments {
    display: none;
  }
}

@include iphone5 {
  #datePickerScrollY {
    height: 40%;
  }

  #countSelectedAppointments {
    display: none;
  }
}

@include nexus5 {
  div#datePickerScrollY {
    height: 40%;
  }
}

#helpText {
  div {
    height: 34px;
    min-height: 34px;
    padding-top: 4px;

    span {
      font-weight: $font-weight-light;
    }

    strong {
      color: $fluster-peach3;
    }

    span, strong {
      font-size: $fluster-text-normal;
    }
  }
}

div.date-picker-actions {
  z-index: 1;
}