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

div#datePickerScrollX {

    margin-left: 0;
    margin-right: 0;

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

#datePickerScrollY {
    height: 40%;

    ion-list {
        margin-bottom: 0;

        ion-item {

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

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

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

                &.appointment-in-the-past {
                    color: $fluster-dark-blue;
                }

                &.appointment-already-taken, &.appointment-selected.appointment-already-taken, &.appointment-selected.appointment-in-the-past.appointment-already-taken {
                    color: $fluster-peach1;
                }

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

@include iphone4 {
    #datePickerScrollY {
        height: 28%;
        margin-bottom: 10px;
    }
}

@include iphone5 {
    #datePickerScrollY {
        height: 34%;
        margin-bottom: 10px;
    }
}

@include nexus5 {
    div#datePickerScrollY {
        height: 34%;
        margin-bottom: 10px;
    }
}

#displaySelectedAppointment {
    font-size: $fluster-text-normal;
    font-weight: $font-weight-light;
    min-height: 16px;
    height: 16px;

    strong {
        color: $fluster-peach3;
    }
}
