@import "../../style_config/config";


// end부분 회색주석
#root,.ReactModalPortal {
    .DayPicker--reservation {
        .DayPicker-Body {
            background-color:white;
            border-color: transparent;
        .DayPicker-Week {
            .DayPicker-Day--selected.DayPicker-Day.DayPicker-Day--end {
                background-color: $orange-color!important;
            }
        }
    }
    }
}

@include accent() {
    
    .JDdatePcikerInformation {
        margin-top: $standard-margin-bottom;
    }
    
.DayPicker {

    color: $html-color;

    &__navbtns {
        &--left {
            margin-left: $daypicker-insdie-padding;
        }
        &--right {
            margin-right: $daypicker-insdie-padding!important;
        }
    }

    &--unDisplayInfo {
        .JDdatePcikerInformation {
            display: none;
        }
    }
    &--unDisplayCaption {
        .DayPicker-Caption {
            display: none;
        }
    }
    &--unDisplayNavbar {
        .DayPicker-NavBar {
            display: none;
        }
    }

    // 오른쪽으로
    &.DayPicker--right {
        left:0;
        right:auto;
    }
    // 오른쪽으로
    &.DayPicker--center {
        left:0;
        right:0;
    }
    // 왼쪽으로
    &.DayPicker--left {
        left:auto;
        right:0;
    }


    &--showWeekEndColor {
        .DayPicker-WeekdaysRow {
            & > div:nth-child(1) {
                color: $error-color;
            }
        }
        .DayPicker-Caption__week--0 {
            color: $error-color;
        }
    }

    &--readOnly {
        pointer-events: none;
        .JDinput {
            pointer-events: none;
        }
    }
    
    &--unYear {
        .DayPicker-Caption__year {
            display: none;
        }
    }

    &--unRange {
        .DayPicker-Day {
            border-radius:0%;
            &--start {
                color:white;
            }

            &:hover {
                background-color:$grey-level1;
                border-radius: $standard-border-radius!important;
                overflow:hidden;
            }
        }
    }

    &-box {
        position: relative;
        &--inputComponent {
            display: inline-block;

            &__arrow {
                position: relative;
                z-index: $z-index-8;
                &--left {
                    margin-right: $standard-small-space;
                }
            }
            
        }
    }

    &-wrapper {
        outline:none;
    }

    border: $daypicker-border;
    border-radius: $daypicker-border-radius;

    &--maxLimit {
        max-width: $daypicker-block-height * 7;
    }

    // 📆 이게 달력부분
    &--input {
        border:none;
        border-radius: 0px 0px $daypicker-border-radius $daypicker-border-radius;
        min-width: 330px;
    }    

    // 달력위 오른쪽 왼쪽 버튼들
    // 👿 클래스명 달아줘라
    .JDbtn {
        margin-top: $daypicker-insdie-padding;
        margin-bottom: 0;
        border:none;
    }

    .DayPicker-Months {
        .DayPicker-WeekdaysRow {
            display: flex;
            flex: auto;

            .DayPicker-Weekday {
                flex: 1 1;
                text-align: center;

                abbr {
                    text-decoration: none;
                }
            }
        }

        .DayPicker-Month {
            padding: $daypicker-insdie-padding;

            .DayPicker-Caption {
                height: $daypicker-caption-height;
                line-height: $daypicker-caption-height;
                margin-bottom: $daypicker-caption-margin-bottom;
                text-align: center;
                font-weight: bold;

                &__year {
                    margin-right: .5rem;
                }
            }

            .DayPicker-Body {
                overflow:hidden;
                border-radius: 0px 0px $standard-border-radius $standard-border-radius;

                .DayPicker-Week {
                    display: flex;
                    flex: auto;

                    .DayPicker-Day {
                        cursor: pointer;
                        flex: 1 1;
                        border-color: white;
                        text-align: center;
                        height: $daypicker-block-height;
                        line-height: $daypicker-block-height - ($daypicker-border-tick * 2);
                        outline: 0;
                        border-top: $daypicker-border-tick solid white;
                        border-bottom: $daypicker-border-tick solid white;
                        box-sizing: border-box;
                        transition: border-radius $daypicker-day-transition;
                        transition-timing-function: ease-out;
                        border-radius: 50%;

                        &--outside {
                            cursor: default;
                        }

                        // 시작과 끝 포함 사이의 날자들 포함
                        &--selected {
                            background-color: $primary-color;
                            color: $primary-color-on;
                            border-radius: 0%;
                        }

                        &--start {
                            border-radius: 50% 0 0 50%;
                        }

                        &--start.DayPicker-Day--end {
                            border-radius: 8px/12px!important;
                            background-color: $primary-color;
                        }

                        //disabled style
                        &--disabled {
                            cursor: default;
                            color: $daypicker-disabled-color;
                        }

                        &--end {
                            border-radius: 0 50% 50% 0;
                        }

                        &--today {
                            font-weight: bold;
                            position: relative;

                            &:before {
                                width: $daypicker-dot-size;
                                height: $daypicker-dot-size;
                                border-radius: 50%;
                                content: "";
                                display: block;
                                position: absolute;
                                top: $daypicker-dot-top;
                                left: 50% - ($daypicker-dot-size / 2px);
                                background-color: $daypicker-today-color;
                            }
                        }

                        &--outside {
                            font-size: .8rem;

                            &.DayPicker-Day--selected {
                                opacity: 0.5;
                                color: $daypicker-otuside-bgcolor;
                            }
                        }

                    }
                }
            }
        }
    }

    @import "./component/horizen/Horizen.scss";
    @import "./component/input/JDdayPickerInput.scss";}
}