ux-date-time-picker {
    ux-date-time-picker-header .header {
        .header-title {
            color: $ias-dark-gray;
            font-weight: normal;
        }

        button {
            border: 1px solid transparent;
            border-radius: 2px;

            &:focus, &.header-title:focus {
                outline: none;
            }

            &:hover:not(.header-title) {
                background-color: $ias-light-gray;
                border: 1px solid $ias-border-gray;
                color: $ias-blue-2;
            }

            &.header-title:hover, &.header-title.active:hover {
                background-color: transparent;
                color: $ias-blue-2;
            }
        }
    }

    ux-date-time-picker-day-view .calendar {
        .weekday {
            color: $ias-dark-gray;
            font-weight: normal;
            background-color: $ias-panel-gray;
        }

        .date-cell {
            padding: 5px;

            .date-button {
                border: 1px solid transparent;
                border-radius: 2px;
                height: 30px;
                width: 30px;

                &:hover {
                    background-color: transparent;
                    border-color: $ias-blue-3;
                    color: $ias-blue-3;
                }

                &.current {
                    background-color: $ias-light-gray;

                    &:hover {
                        background-color: $ias-light-gray;
                        color: $ias-blue-3;
                    }
                }

                &.active, &.current.active {
                    background-color: $ias-border-gray;
                    color: $ias-dark-gray;
                    font-weight: 700;

                    &:hover {
                        background-color: $ias-border-gray;
                        color: $ias-blue-3;
                    }
                }

                &:focus {
                    color: $ias-blue-3;
                    border-color: $ias-blue-3;
                    outline: none;
                }
            }
        }
    }

    ux-date-time-picker-month-view, ux-date-time-picker-year-view {
        .calendar .calendar-row {
            .calendar-item {
                border: 1px solid transparent;
                border-radius: 2px;

                &:hover {
                    background-color: transparent;
                    border-color: $ias-blue-3;
                    color: $ias-blue-3;
                }

                &.active {
                    background-color: $ias-border-gray;
                    color: $ias-dark-gray;
                    font-weight: 700;
                }

                &:focus {
                    outline: none;
                }
            }
        }
    }

    ux-date-time-picker-time-view {
        .spin-button {
            align-self: center;
            padding: 0 5px;

            border: 1px solid transparent;
            border-radius: 2px;

            &:hover {
                background-color: $ias-light-gray;
                border: 1px solid $ias-border-gray;

                > span {
                    color: $ias-blue-2;
                }
            }

            &:focus {
                outline: none;
            }
        }

        .time-picker-meridian .button-toggle-accent {
            &:hover {
                color: $ias-blue-2;
            }

            &.active, &:active {
                background-color: $ias-border-gray;
                border-color: #ccc; // This color is to match the rest of the box, even though it's not an IAS color
                box-shadow: none;
                color: $ias-dark-gray;
            }

            &:focus {
                outline: none;
            }
        }
    }

    .now-button {
        &:focus {
            outline: none;
        }

        &:hover {
            background-color: transparent;
            color: $ias-blue-2;
        }
    }
}