@import 'commons';

$m-base-calendar--week-length: 7 !default;
$m-base-calendar--dimension: $m-touch-size !default;
$m-base-calendar--weekday-height: 41px !default; // magic number
$m-base-calendar--width: calc(#{$m-base-calendar--dimension * $m-base-calendar--week-length} + #{$m-space-md} * 2) !default;
$m-base-calendar--min-height: calc(#{($m-base-calendar--dimension * 5) + $m-base-calendar--weekday-height} + #{$m-space});
$m-base-calendar--max-height: calc(#{($m-base-calendar--dimension * 6) + $m-base-calendar--weekday-height} + #{$m-space});
$m-base-calendar--border-focus: 1px solid $m-color-interactive-darker;

@mixin m-base-calendar__show-indicator() {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

@mixin m-base-calendar__today() {
    font-weight: $m-font-weight-bold;

    &::before {
        background-color: $m-color-grey-light;
        border-color: $m-color-grey-light;

        @include m-base-calendar__show-indicator();
    }
}

@mixin m-base-calendar__today() {
    font-weight: $m-font-weight-semi-bold;

    &::before {
        background-color: $m-color-grey-light;
        border-color: $m-color-grey-light;

        @include m-base-calendar__show-indicator();
    }
}

@mixin m-base-calendar__grid($col: $m-base-calendar--week-length, $width: $m-base-calendar--dimension, $height: $m-base-calendar--dimension) {
    text-align: center;
    display: grid;
    grid-auto-rows: $height;
    grid-template-columns: repeat($col, 1fr);

    @media (min-width: $m-mq-min-sm) {
        grid-template-columns: repeat($col, $width);
    }
}

.m-base-calendar {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    overflow: hidden;

    @media (min-width: $m-mq-min-sm) {
        border: $m-border-width-sm solid $m-color-border;
        width: $m-base-calendar--width;
    }

    &.m--is-years-months-view {
        .m-base-calendar__header {
            &::after {
                transform: translate(0, 0);
                visibility: visible;
            }
        }
    }

    &__next,
    &__previous {
        color: $m-color-interactive;

        &:hover,
        &:focus {
            color: $m-color-interactive-darker;
        }
    }

    &__header,
    &__body {
        width: 100%;
        background: $m-color-white;

        @media (max-width: $m-mq-max-sm) {
            min-width: $m-base-calendar--width;
        }
    }

    &__header {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 68px; //Magic number
        padding: $m-space-xs $m-space;

        @media (min-width: $m-mq-min-sm) {
            padding-right: $m-space-md;
            padding-left: $m-space-md;
        }

        &::after {
            transition: transform $m-transition-duration-lg ease;
            position: absolute;
            z-index: 3;
            right: $m-space;
            bottom: 0;
            left: $m-space;
            content: '';
            height: 1px;
            background: $m-color-border;
            transform: translate(0, $m-base-calendar--max-height);
            visibility: hidden;

            @media (min-width: $m-mq-min-sm) {
                right: $m-space-md;
                left: $m-space-md;
            }
        }
    }

    &__current-month-and-year {
        margin: 0 3px 0 0;
    }

    &__nav-buttons {
        transition: opacity $m-transition-duration ease;
        margin-right: -16px; // Magic number: align buttons with calendar

        &.m--is-enter,
        &.m--is-leave-to {
            opacity: 0;
        }
    }

    &__body {
        position: relative;
        overflow: hidden;
    }

    &.m--is-max-row {
        .m-base-calendar {

            &__days-view,
            &__years-months-view {
                height: $m-base-calendar--max-height;
            }
        }
    }

    &__days-view,
    &__years-months-view {
        padding-right: $m-space;
        padding-left: $m-space;
        padding-bottom: $m-space;
        width: 100%;
        height: $m-base-calendar--min-height;

        @include m-scrollbar();

        @media (min-width: $m-mq-min-sm) {
            // for animation purpose
            transition: height $m-transition-duration ease;
            padding-right: $m-space-md;
            padding-left: $m-space-md;
        }
    }

    &__days-view {
        transition-duration: $m-transition-duration-lg;

        &.m--is-enter-active,
        &.m--is-leave-active {
            position: absolute;
            z-index: 1;
        }
    }

    &__years-months-view {
        transition: transform $m-transition-duration-lg ease;
        position: relative;
        z-index: 2;
        padding-top: $m-space;
        background: $m-color-white;
        overflow-y: auto;

        &.m--is-enter,
        &.m--is-leave-to {
            transform: translate(0, $m-base-calendar--max-height);
        }
    }

    &__year-title {
        transition: color $m-transition-duration ease;
        @include m-font-size('h4');
        color: $m-color-grey;

        &:first-child {
            margin: 0;
        }

        &:not(:first-child) {
            margin-top: $m-space-lg;
        }

        &.m--is-current {
            color: $m-color-black;
        }
    }

    &__month-list {
        @include m-base-calendar__grid(6, minmax($m-base-calendar--dimension, auto));
    }

    &__week {
        @include m-base-calendar__grid($height: auto);

        align-items: center;
        border-bottom: $m-border-width-sm solid $m-color-border;
        padding: 0 0 $m-space-2xs 0;
        margin: 0;
    }

    &__weekday {
        font-weight: $m-font-weight-semi-bold;
        color: $m-color-grey-dark;
    }

    &__days-grid {
        @include m-base-calendar__grid();

        margin-top: $m-space;
    }

    &__day-content {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        width: $m-base-calendar--dimension;
        height: $m-base-calendar--dimension;
        margin: 0 auto;
        outline: none;

        &.m--is-hidden {
            display: none;
        }
    }

    // for left to right range selection visual
    .m--is-selection-start {

        &+.m--is-highlighted,
        &:nth-child(7n)+.m--is-highlighted {
            z-index: 0;

            &::after {
                position: absolute;
                z-index: -2;
                top: -50%;
                left: -50%;
                content: '';
                width: $m-touch-size;
                height: $m-touch-size;
                background-color: $m-color-interactive-lightest;
            }
        }

        &+.m--is-highlighted {
            &::after {
                transform: translate3d(0, 50%, 0);
            }
        }

        &:nth-child(7n)+.m--is-highlighted {
            &::after {
                transform: translate3d(700%, -50%, 0);
            }
        }
    }

    // for right to left range selection visual
    .m--is-highlighted+.m--is-selection-start {
        border-radius: 0 50% 50% 0;
    }
}