@import "./base/var";
@import "./mixins/index.scss";

$pane-col-width-3: #{($--date-picker-em-width-default + $--date-picker-pane-margin * 2) * 7 / 3 - $--date-picker-pane-margin * 2};
$pane-col-width-2: #{($--date-picker-em-width-default + $--date-picker-pane-margin * 2) * 7 / 2 - $--date-picker-pane-margin * 2};
$pane-min-width: #{($--date-picker-em-width-default + $--date-picker-pane-margin * 2) * 7};
$pane-time-col-height: #{$--date-picker-em-width-default - 4};

@include c(date-picker) {
    display: inline-block;
    font-size: $--font-size-default;
    vertical-align: middle;
    @include e(reference) {

    }

    @include e(drop-down-inner) {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        border: $--border-default;
        border-radius: $--border-radius-default;
        box-shadow: $--box-shadow-default;
        background-color: $--color-white;
    }
}

@include c(date-pane-item) {
    @include e(col) {
        color: $--color-text-default;
        cursor: pointer;
        transition: all $--animation-time;
        display: inline-block;
        text-align: center;
        margin: $--date-picker-pane-margin 0;
        padding: 0 $--date-picker-pane-margin;

        em {
            border: 1px solid transparent;
            display: block;
            font-style: normal;
            transition: all $--animation-time;
            border-radius: $--border-radius-default;
            width: $--date-picker-em-width-default;
            height: $--date-picker-em-width-default;
            line-height: $--date-picker-em-width-default;
        }

        @include e(hover, false, true) {
            em:hover {
                background-color: mix($--color-primary, $--color-white, 20%);
            }
        }
    }

    @include e((week, week-number)) {
        cursor: default;
        margin: $--date-picker-pane-margin 0;
        padding: 0 $--date-picker-pane-margin;

        em {
            cursor: default;
            width: $--date-picker-em-width-default;
            height: $--date-picker-em-width-default;
            line-height: $--date-picker-em-width-default;
        }
    }


    @include e(week-number) {
        em {
            color: $--date-picker-no-now-month-color;
        }
    }

    @include e(now) {
        em {
            color: $--color-primary;
        }
    }

    @include e(between) {
        background-color: mix($--color-primary, $--color-white, 20%);
    }

    @include e(selected) {
        em {
            border: 1px solid $--color-primary;
            background-color: $--color-primary;
            color: $--color-white;
        }
        @include e(no-now-month, false, true) {
            background-color: $--color-white;
            color: $--date-picker-no-now-month-color;
        }
    }

    @include e(disabled) {
        background-color: $--background-color-disabled;
        cursor: not-allowed;
        em {
            background-color: $--background-color-disabled;
            color: $--color-text-disabled;
            cursor: not-allowed;
            border-color: transparent;
        }
    }

    @include e(no-now-month) {
        color: $--date-picker-no-now-month-color;
    }
}

@include c(date-pane-single) {

    @include e(header) {
        @include clear-float;
        overflow: hidden;
        text-align: center;
        border-bottom: $--border-default;
        font-size: #{$--font-size-default + 2px};
        height: #{$--date-picker-em-width-default + $--date-picker-pane-margin * 2};
        line-height: #{$--date-picker-em-width-default + $--date-picker-pane-margin * 2};
        i {
            font-size: $--font-size-default;
        }
    }
    @include e(header-date-label) {
        cursor: pointer;
        &:hover {
            color: $--color-primary;
        }
    }
    @include e(header-pre) {
        float: left;
        padding-left: #{$--date-picker-pane-padding + $--date-picker-pane-margin};
        i {
            color: $--color-text-icon;
            cursor: pointer;
            margin-right: 5px;
            transition: color $--animation-time;

            &:hover {
                color: $--color-primary;
            }
        }
    }
    @include e(header-next) {
        float: right;
        padding-right: #{$--date-picker-pane-padding + $--date-picker-pane-margin};
        i {
            color: $--color-text-icon;
            cursor: pointer;
            margin-left: 5px;
            transition: color $--animation-time;

            &:hover {
                color: $--color-primary;
            }
        }
    }


    @include e(body) {
        padding: 10px;
        word-break: break-all;
    }
}


@include c(date-pane) {
    display: flex;
    @include e(shortcuts) {
        background-color: $--background-color-base;
        width: 100px;
        border-right: $--border-default;
    }
    @include e(shortcuts-item) {
        padding: $--date-picker-pane-padding;
        cursor: pointer;
        @include utils-ellipsis;
        &:hover {
            background-color: $--background-color-hover;
        }
    }
    @include e(content) {
        display: flex;
    }
    @include e(footer) {
        border-top: $--border-default;
        padding: $--date-picker-pane-padding;
        text-align: right;
        @include clear-float;
    }
    @include e(footer-button) {
        margin-left: 5px;
    }
    @include e(footer-time) {
        float: left;
    }
}


@include c(date-pane-date) {
    min-width: $pane-min-width;

    &__date-row-week {
        &:not(&-selected):hover {
            @include ci(date-pane-item) {
                &__col {
                    background-color: mix($--color-primary, $--color-white, 20%);
                }
                &__week-number {
                    background-color: transparent;
                }
                &__disabled {
                    background-color: $--background-color-disabled;
                }
            }
        }
    }

    @include e(date-row-week-selected) {
        @include ci(date-pane-item) {
            &__col {
                background-color: mix($--color-primary, $--color-white, 20%);

                &:nth-last-of-type(7) em, &:nth-last-of-type(1) em {
                    border: 1px solid $--color-primary;
                    background-color: $--color-primary;
                    color: $--color-white;
                }
            }
            &__week-number {
                background-color: transparent;
            }
            &__disabled {
                background-color: $--background-color-disabled;
            }
        }
    }

    @include m(show-week-number) {
        min-width: #{($--date-picker-em-width-default + $--date-picker-pane-margin * 2) * 8};
    }

    @include e(week, false) {
        text-align: right;
    }
}


@include c(date-pane-year) {
    min-width: $pane-min-width;

    @include ci(date-pane-item) {
        &__col {
            margin: #{$--date-picker-pane-margin * 2} 0;
            padding: 0 #{$--date-picker-pane-margin * 2};

            em {
                width: #{$--date-picker-em-width-default * 7 / 3};
            }
        }
    }
}


@include c(date-pane-month) {
    min-width: $pane-min-width;

    @include ci(date-pane-item) {
        &__col {
            margin: #{$--date-picker-pane-margin * 2} 0;
            padding: 0 #{$--date-picker-pane-margin * 2};

            em {
                width: #{$--date-picker-em-width-default * 7 / 3};
            }
        }
    }
}

@include c(date-pane-time) {
    min-width: $pane-min-width;
    display: flex;
    @include e(hide) {
        visibility: hidden;
    }

    @include e((hh, mm, ss)) {
        height: #{($--date-picker-em-width-default - 4) * 9};
    }

    @include ci(date-pane-item__col) {
        display: block;
        margin: 0;
        padding: 0 $--date-picker-pane-margin;
        em {
            width: $pane-col-width-3;
            height: $pane-time-col-height;
            line-height: $pane-time-col-height;
        }
    }

    @include m(no-show-ss, false, true) {
        @include ci(date-pane-item__col) {
            em {
                width: $pane-col-width-2;
            }
        }
    }
}
