for_client/src/components/dateCalendar/style.scss

.hc-date-calendar-box {
    position: relative;
    display: inline-block;
    padding: 14px;
    background: white;
    border: 1px solid #efeff5;
    border-radius: 3px;
    .hc-date-calendar-panel {
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        grid-area: left-calendar;
        user-select: none;
        .hc-date-month-bar {
            position: relative;
            display: grid;
            grid-template-columns: 28px 28px 1fr 28px 28px;
            align-items: center;
            justify-items: center;
            .hc-date-month {
                position: relative;
                cursor: pointer;
                color: #c2c2c2;
                width: 28px;
                text-align: center;
                transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s;
                &:hover {
                    color: #333639;
                }
            }
            .hc-date-month-year {
                position: relative;
                font-weight: 500;
                color: #1f2225;
                display: flex;
                .date-year, .date-month {
                    cursor: pointer;
                    border-radius: 3px;
                    padding: 4px 7px;
                    transition: background-color .3s cubic-bezier(0.4, 0, 0.2, 1);
                    &:hover {
                        background-color: #f3f3f5;
                    }
                }
            }
        }
        .hc-date-weekdays {
            position: relative;
            display: grid;
            grid-template-columns: repeat(7, 38px);
            grid-template-rows: repeat(1, 32px);
            align-items: center;
            justify-items: center;
            margin: auto auto 4px;
            border-bottom: 1px solid #efeff5;
            .hc-date-weekdays-day {
                line-height: 15px;
                width: 24px;
                text-align: center;
                font-size: 14px;
                color: #333639;
            }
        }
        .hc-date-dates {
            position: relative;
            margin: auto;
            display: grid;
            grid-template-columns: repeat(7, 38px);
            grid-template-rows: repeat(6, 32px);
            align-items: center;
            justify-items: center;
            flex-wrap: wrap;
            --n-bezier: cubic-bezier(0.4, 0, 0.2, 1);
            .hc-date-dates-day {
                position: relative;
                width: 25px;
                height: 25px;
                line-height: 25px;
                text-align: center;
                font-size: 14px;
                border-radius: 2px;
                cursor: pointer;
                z-index: 0;
                border: 1px solid transparent;
                transition: background-color .2s var(--n-bezier), color .2s var(--n-bezier);
                &:before {
                    content: "";
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    z-index: -1;
                    border-radius: inherit;
                    transition: background-color .3s var(--n-bezier);
                }
                &:hover::before {
                    background-color: #f3f3f5;
                }
                &.cur {
                    color: $green;
                    font-weight: 800;
                    &:before {
                        background-color: white;
                    }
                    &:hover::before {
                        background-color: rgba(62, 185, 59, .1);
                    }
                }
                &.selected {
                    color: var(--hc-primary);
                    &:before {
                        background-color: var(--hc-primary-light-1);
                    }
                }
                &.excluded {
                    color: #c2c2c2;
                    cursor: default;
                    &:hover::before {
                        background-color: initial;
                    }
                }
                &.choice {
                    border: 1px solid var(--hc-primary);
                }
            }
        }
        .hc-date-actions {
            position: relative;
            border-top: 1px solid #efeff5;
            margin: 0 -15px;
            margin-bottom: -15px;
            padding: 8px 15px;
            display: flex;
            align-items: center;
            .choice-date {
                position: relative;
                flex: auto;
            }
        }
    }
}