busy-web/ember-date-time

.busyweb {
    &.emberdatetime {
        &.p-time-picker {
            position: relative;
            width: $ept-width;
            height: ($ept-width + 80);

            & > .clock-container {
                width: 100%;
                height: 100%;
                padding: 80px 0 0;
                box-sizing: border-box;

                & > .header {
                    width: 100%;
                    height: 96px;
                    margin: -80px 0 0;
                    padding: 20px 0;
                    border-radius: 2px 2px 0 0;
                    background: $ept-color-7;
                    box-sizing: border-box;
                    color: $ept-color-4-1;

                    & > span {
                        height: 100%;
                        margin: 0;
                        padding: 0;
                        float: right;
                        font-style: lighter;
                        line-height: 1;
                        text-align: center;
                        box-sizing: border-box;

                        & > span {
                            display: inline-block;
                            height: 100%;
                            margin: 0;
                            background-color: none;
                        }

                        &.numbers-container {
                            text-align: right;

                            & > span {
                                font-size: 55px;
                                font-weight: lighter;

                                &.number {
                                    cursor: pointer;
                                }
                            }
                        }

                        &.am-pm-container {
                            width: 60px;
                            margin: 0 20px 0 0;
                            padding: 6px 0 0;

                            & > .button {
                                width: 40px;
                                height: 24px;
                                border-radius: 2px;
                                font-size: 16px;
                                font-weight: lighter;
                                line-height: 24px;
                                text-align: center;
                                cursor: pointer;

                                &.am,
                                &.pm {
                                    margin: 0;
                                }

                                &.active {
                                    //background: #42ace1;
                                    color: $ept-color-4;
                                }
                            }
                        }
                    }
                }

                & > .body {
                    width: 100%;
                    height: 100%;
                    overflow: hidden;

                    & > .outside-container {
                        display: block;
                        position: relative;
                        width: 100%;
                        height: 100%;
                        padding: 20px;
                        float: left;
                        transform: translate(0, 0);
                        box-sizing: border-box;

                        &.--svg-clock__hours {
                            transform: translate(-100%, 0);

                            &.active {
                                transform: translate(0, 0);
                            }
                        }

                        &.--svg-clock__minutes {
                            transform: translate(100%, -100%);

                            &.active {
                                transform: translate(0, -100%);
                            }
                        }

                        & > h1 {
                            color: #2e3e4f;
                            font-size: 16px;
                            text-align: center;
                        }

                        $clock-font: ($ept-width * .0522);
                        $clock-font-small: ($ept-width * .0478);
                        $clock-hand-stroke: ($ept-width * .0087);

                        & > svg {
                            margin: 0;
                            pointer-events: all;
                            box-sizing: content-box;

                            .cls-dark-fill {
                                fill: $ept-color-2;
                            }

                            .cls-bright-fill {
                                fill: $ept-color-3;
                            }

                            .cls-bright-stroke {
                                stroke: $ept-color-3;
                            }

                            .cls-cursor {
                                cursor: pointer;
                            }

                            .cls-line {
                                fill: none;
                                stroke-miterlimit: 10;
                                stroke-width: $clock-hand-stroke;
                            }

                            .cls-text {
                                font-size: $clock-font;
                                font-weight: lighter;
                                line-height: 1;
                                fill: $ept-color-6-1;
                                user-select: none;
                            }

                            .cls-text-small {
                                font-size: $clock-font-small;
                                font-weight: lighter;
                                line-height: 1;
                                fill: $ept-color-6-1;
                                user-select: none;
                            }

                            .cls-transparent {
                                fill: transparent !important;
                            }

                            path {
                                &.disabled {
                                    pointer-events: none;
                                }
                            }

                            circle {
                                .cls-2 {
                                    cursor: pointer;
                                }
                            }

                            text {
                                &.disabled {
                                    pointer-events: none;
                                    fill: $ept-color-6-2;
                                }

                                &.selected {
                                    fill: $ept-color-6 !important;
                                }
                            }
                        }
                    }
                }

                &.hours {
                    & > .header {
                        & > .numbers-container {
                            & > .number {
                                &.hours {
                                    color: $ept-color-4;
                                }
                            }
                        }
                    }
                }

                &.minutes {
                    & > .header {
                        & > .numbers-container {
                            & > .number {
                                &.minutes {
                                    color: $ept-color-4;
                                }
                            }
                        }
                    }
                }

                &.invalid {
                    & > .header {
                        color: lighten(indianred, 20%);

                        & > span {
                            &.am-pm-container {
                                & > .button {
                                    &.active {
                                        color: indianred;
                                    }
                                }
                            }
                        }
                    }

                    &.hours {
                        & > .header {
                            & > .numbers-container {
                                & > .number {
                                    &.hours {
                                        color: indianred;
                                    }
                                }
                            }
                        }
                    }

                    &.minutes {
                        & > .header {
                            & > .numbers-container {
                                & > .number {
                                    &.minutes {
                                        color: indianred;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        &.flash-warn {
            .p-time-picker {
                & > .clock-container {
                    & > .body {
                        & > .outside-container {
                            & > svg {
                                .--svg-plot {
                                    &.cls-bright-fill {
                                        fill: cornflowerblue;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}