$date-picker-prefix-cls: #{$prefix-name}date-picker;
$pickersCls: #{$date-picker-prefix-cls}s;

.#{$date-picker-prefix-cls} {
    width: 100%;

    &-selection {
        width: 100%;
        height: 100%;
    }

    &-type-daterange {
        display: flex;

        .#{$pickersCls} {
            box-shadow: none;

            &-container-inner {
                display: flex;
            }
        }
    }
}

.#{$pickersCls} {
    $bodypadding: 5px;
    user-select: none;
    padding: $bodypadding 0;

    &-button-confirm {
        margin-left: 4px;
    }

    &-container {
        background: white;
        box-shadow: 0 0px 5px rgb(0 0 0 / 10%);
        z-index: 10;

        &-confirm {
            display: flex;
            justify-content: flex-end;
            border-top: 1px solid #e8eaec;
            text-align: right;
            padding: 8px;
        }

        .#{$button-prefix-cls} {
            font-size: 12px;
            height: auto;
            padding: 0px 4px;
        }
    }

    @mixin HoverColor() {
        background-color: lighten($primaryColor, 40%);
    }

    @mixin Hover() {
        &:hover {
            @include HoverColor
        }
    }

    &-header {
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-bottom: 1px solid #eee;
        display: inline-flex;
        width: 100%;
        align-items: center;
        padding: 0 $bodypadding;

        &-date {
            flex: 1;
            text-align: center;
            cursor: pointer;

            span:hover {
                color: $primaryColor;
            }
        }

        .#{$icon-prefix-cls} {
            cursor: pointer;
            font-size: 14px;

            &:hover {
                color: $primaryColor;
            }
        }
    }

    $day-item-widht: 28px;

    &-body {
        $width: $day-item-widht * 7+$bodypadding * 2;
        width: $width;
        height: $day-item-widht *7;
        padding: 0 $bodypadding;

    }

    &-week,
    &-day {
        display: flex;
        flex-wrap: wrap;
    }

    &-weeks,
    &-days {
        width: 28px;
        height: 28px;
        line-height: 28px;
        text-align: center;
    }

    &-weeks {
        color: #ccc;
    }

    &-days {
        cursor: pointer;
        border-radius: $borderRadius;
        transition: all .1s;

        &-type-1 {
            color: #ccc;
        }

        &-type-2 {
            color: $textColor;
        }

        &-type-3 {
            color: $primaryColor;
        }

        &-type-2,
        &-type-3 {
            @include Hover;
        }

        &-hover {
            @include HoverColor
        }

        &-active {
            color: white;
            background-color: $primaryColor;

            &:hover {
                background-color: $primaryColor ;
            }
        }


    }

    &-month,
    &-year {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    &-months,
    &-years {
        width: 40px;
        text-align: center;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
        @include Hover;
        margin: 10px;
    }



}