busy-web/ember-date-time

$day-size: ($ept-width * .1213);

.busyweb {
    &.emberdatetime {
        &.p-date-picker {
            width: $ept-width;

            & > .calendar-container {
                width: 100%;

                & > .header-container {
                    display: inline-block;
                    width: 100%;
                    padding: 14px 30px;
                    background-color: $ept-color-7;
                    box-sizing: border-box;

                    & > div {
                        display: inline-block;
                        width: 100%;

                        & > div {
                            display: inline-block;
                            padding: 0 10px 0 0;
                            float: left;
                            color: $ept-color-4;
                            font-size: 34px;
                            font-weight: normal;
                            line-height: 40px;
                            text-align: left;
                        }

                        &.year-container {
                            & > div {
                                padding: 0;
                                color: $ept-color-4-1;
                                font-size: 16px;
                                font-weight: lighter;
                                line-height: 24px;
                            }
                        }
                    }
                }

                & > .calendar-body {
                    display: inline-block;
                    width: 100%;
                    padding: 10px 5px;
                    box-sizing: border-box;

                    & > .header {
                        display: inline-block;
                        width: 100%;
                        padding: 4px 10px;
                        text-align: center;
                        box-sizing: border-box;

                        & > div {
                            display: inline-block;
                            border-radius: 3px;
                            background-color: transparent;
                            box-sizing: border-box;

                            &:hover {
                                background-color: $ept-color-5;
                            }

                            &.month-year {
                                width: 150px;
                                height: 30px;
                                color: $ept-color-6-1;
                                font: 14px/30px $ept-font-family;
                                text-align: center;
                                cursor: initial;

                                &:hover {
                                    background-color: transparent;
                                }
                            }

                            &.arrow {
                                width: 30px;
                                height: 30px;
                                padding: 7px;
                                float: left;
                                cursor: pointer;

                                & > span {
                                    width: 100%;
                                    height: 100%;
                                    float: right;
                                    border: 2px solid $ept-color-6-1;
                                    box-sizing: border-box;
                                }

                                &.disabled {
                                    cursor: not-allowed;

                                    &:hover {
                                        background-color: transparent;
                                    }

                                    & > span {
                                        border-color: $ept-color-5;
                                    }
                                }

                                &.add-month {
                                    float: right;

                                    & > span {
                                        transform: rotate(45deg) translate(-3px, 3px);
                                        border-bottom-color: transparent;
                                        border-left-color: transparent;
                                    }
                                }

                                &.subtract-month {
                                    & > span {
                                        transform: rotate(45deg) translate(3px, -3px);
                                        border-top-color: transparent;
                                        border-right-color: transparent;
                                    }
                                }
                            }
                        }
                    }

                    & > table {
                        &.calendar {
                            width: 100%;
                            font-size: 14px;
                            font-weight: lighter;
                            line-height: $day-size + 3;
                            text-align: center;
                            border-collapse: collapse;
                            user-select: none;

                            & > tr {
                                color: $ept-color-6-2;
                                font-weight: inherit;

                                & > th {
                                    font-weight: inherit;
                                    line-height: $day-size + 3;
                                }

                                & > td {
                                    color: $ept-color-6-1;
                                    font-weight: inherit;
                                    cursor: pointer;
                                    vertical-align: middle;

                                    & > span {
                                        display: inline-block;
                                        width: $day-size;
                                        height: $day-size;
                                        border-radius: 20px;
                                        line-height: $day-size + 3;
                                    }

                                    &.outside {
                                        color: $ept-color-6-2;
                                    }

                                    &.disabled {
                                        color: $ept-color-6-3;
                                        cursor: not-allowed;
                                    }

                                    &.current {
                                        color: $ept-color-4;

                                        & > span {
                                            background-color: $ept-color-3;
                                        }
                                    }

                                    &.range {
                                        background-color: $ept-color-2;
                                        //color: $ept-color-4;

                                        &.range-start,
                                        &.range-end {
                                            position: relative;
                                            background-color: transparent;

                                            & > span {
                                                background-color: $ept-color-3;
                                                color: $ept-color-1;
                                            }

                                            &:before {
                                                position: absolute;
                                                top: 0;
                                                right: 0;
                                                width: 50%;
                                                height: 100%;
                                                background-color: $ept-color-2;
                                                content: '\00a0';
                                                z-index: -1;
                                            }
                                        }

                                        &.range-end {
                                            color: $ept-color-1;

                                            & > span {
                                                background-color: $ept-color-3;
                                            }

                                            &:before {
                                                left: 0;
                                            }
                                        }

                                        &.current {
                                            &.range-start {
                                                & > span {
                                                    background-color: $ept-color-3;
                                                }

                                                &.range-end {
                                                    &:before {
                                                        background-color: transparent;
                                                    }
                                                }
                                            }

                                            &.range-end {
                                                & > span {
                                                    background-color: $ept-color-3;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        &.flash-warn {
            .p-date-picker {
                & > .calendar-container {
                    & > .calendar-body {
                        & > table {
                            &.calendar {
                                & > tr {
                                    & > td {
                                        &.current {
                                            & > span {
                                                background-color: cornflowerblue;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}