@import (once) "../../include/vars";
@import (once) "../../include/mixins";

:root {
    --today-selection: url('data:image/png;base64,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');
    --calendar-background: #ffffff;
    --calendar-header-background: #fafafa;
    --calendar-header-color: #191919;
    --calendar-weekday-background: #f8f8f7;
    --calendar-weekday-color: #191919;
    --calendar-border-color: #dddddd;
    --calendar-color: #191919;
    --calendar-day-border-color: #e8e8e8;
    --calendar-exclude-day-background: #ffffff;
    --calendar-exclude-day-color: #aaa;
    --calendar-today-day-background: #56c30f;
    --calendar-today-day-color: #fff;
    --calendar-border-radius: 6px;
}

.dark-side {
    --calendar-background: #2b2d30;
    --calendar-header-background: #43454a;
    --calendar-weekday-background: #414245;
    --calendar-weekday-color: #dfe1e5;
    --calendar-header-color: #dfe1e5;
    --calendar-border-color: #414245;
    --calendar-color: #dfe1e5;
    --calendar-day-border-color: #4a4d51;
    --calendar-exclude-day-background: #2b2d30;
    --calendar-exclude-day-color: #818181;
}

.calendar {
    display: flex;
    flex-flow: column nowrap;
    position: relative;
    width: auto;
    float: left;
    border: 1px solid var(--calendar-border-color);
    overflow: hidden;
    user-select: none;
    background-color: var(--calendar-background);
    border-radius: var(--calendar-border-radius);
}

.calendar-header, .calendar-content, .calendar-footer {
    position: relative;
    display: block;
    background-color: var(--calendar-background);
    color: var(--calendar-color);
    flex-shrink: 0;
}

.calendar-header {
    padding: 1rem;
    background-color: var(--calendar-header-background);
    color: var(--calendar-header-color);
    user-select: none;

    .header-year {
        font-size: .75rem;
        line-height: 1;
        cursor: pointer;
    }
    .header-day {
        font-size: 1.2rem;
        cursor: pointer;
    }
    
    .header-actions {
        position: absolute;
        right: 8px;
        top: 8px;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: flex-end;
        font-size: 1.2rem;
        line-height: 1;
        user-select: none;
        gap: 4px;
        
        .caret {
            transform: rotate(90deg);
            transition: transform .3s ease-in-out;
            fill: var(--calendar-header-color);
        }
    }
}

.calendar-content {
    padding: 1px;
    width: 278px;

    .calendar-toolbar, .days-wrapper {
        display: flex;
        position: relative;
    }

    .calendar-toolbar {
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        padding: .5rem 0;
        width: 100%;

        .prev-month, .prev-year, .next-month, .next-year, .next-year-group, .prev-year-group {
            padding: .5rem 0;
            cursor: pointer;
            text-align: center;
            width: 30px;
            display: block;
            position: relative;
            flex-shrink: 0;
        }

        .curr-month, .curr-year {
            padding: .5rem 0;
            width: 100%;
            text-align: center;
            cursor: pointer;
            font-size: 14px;
        }
    }

    .week-days, .days {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-gap: 0;
    }

    &.-week-numbers {
        .week-days, .days {
            grid-template-columns: repeat(8, 1fr);
        }
    }

    .week-day, .week-number, .day {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .week-day, .week-number {
        font-weight: 700;
        background-color: var(--calendar-weekday-background);
        color: var(--calendar-weekday-color);
    }

    .week-day {
        border-bottom: 1px solid var(--calendar-border-color);
    }

    .week-number {
        border-right: 1px solid var(--calendar-border-color);
    }

    .week-days .week-number {
        border-right: none;
    }

    .day, .week-day, .week-number {
        height: 39px;
        cursor: pointer;
        font-size: 14px;
        position: relative;
        user-select: none;
        margin: 0;
    }

    .day {
        overflow: hidden;
    }
    
    .day {
        &.selected {
            box-shadow: inset 0 0 0 1px rgba(red(@cyan), green(@cyan), blue(@cyan), 1)!important;

            &::after {
                border-top: 20px solid rgba(red(@cyan), green(@cyan), blue(@cyan), 1);
                border-left: 20px solid transparent;
                right: 0;
                top: 0;
            }

            &::before {
                right: 1px!important;
                top: 1px!important;
            }
        }

        &.showed {
            font-weight: bold;
        }
    }

    .outside {
        color: @gray;
        font-size: 12px;
    }

    .today {
        .day-content {
            background: var(--today-selection) center no-repeat;
            background-size: cover;
            font-weight: bold;
            border-radius: 50%;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .coincidental {
        box-shadow: inset 0 0 12px rgba(red(@gray), green(@gray), blue(@gray), .4);
    }

    .excluded {
        background-color: var(--calendar-exclude-day-background);
        color: var(--calendar-exclude-day-color)!important;
        text-decoration: line-through;
    }

    .day {
        border: 1px solid transparent;

        &:hover {
            border-color: var(--calendar-border-color);
            border-radius: 6px;
        }
    }
    
    .month {
        &.today {
            border: 1px solid var(--calendar-border-color)!important;
            border-radius: 6px;
        }
    }
}

.calendar-footer {
    padding: .5rem;
    border-top: 1px solid var(--calendar-border-color);
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;

    & > * {
        margin: 0 2px;
        font-size: 12px;
        height: 28px;
        line-height: 28px;
        padding: 0 4px;
    }

    &:not(:has(button)) {
        display: none;
    }
}


.calendar {
    &.compact {
        .calendar-content {
            width: 100%;
        }

        .calendar-header {
            padding: .5rem;
            line-height: 1.2;
            .header-year {
                font-size: .65rem;
                font-weight: 600;
            }
            .header-day {
                font-size: 14px;
            }
        }
        .calendar-toolbar {
            & > * {
                padding: 0!important;
                font-size: 14px;
            }
        }
        .calendar-footer {
            .button {
                height: 24px;
                line-height: 24px;
                padding: 0 .25rem;
            }
        }
        .day, .week-number {
            height: 30px;
            line-height: 30px;
            width: 30px;
            margin: 0;
            font-size: 12px;
        }
    }
}

.calendar {
    .calendar-time {
        display: block;
        padding: 5px 10px 10px;
        border-top: 1px solid var(--calendar-border-color);
        background: var(--calendar-background);

        .calendar-time__inner {
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            justify-content: space-between;
        }

        .calendar-time__inner {
            .button {
                &.spinner-button-minus {
                    margin-right: 2px;
                }
            }

            input {
                text-align: center;
            }

            .minutes {
                margin-left: 2px
            }
        }

        .calendar-time__inner-row {
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            width: 100%;
        }

        .calendar-time__inner-cell {
            display: block;
            width: 50%;
        }
    }

    &.compact {
        .calendar-time__inner-cell {
            display: block;
            width: 50%;

            span {
                font-size: 12px;
            }
        }
    }
}

.calendar {
    .calendar-content {
        .months,
        .years
        {
            display: flex;
            flex-flow: row wrap;
        }

        .months,
        .years
        {
            .month, .year {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                flex-basis: 33.33%;
                height: 68px;
                font-size: 14px;
                cursor: pointer;

                @media (hover: hover) {
                    &:hover {
                        border-color: var(--calendar-border-color);
                        border-radius: 6px;
                    }
                }

                @media (hover: none) {
                    &:active {
                        border-color: var(--calendar-border-color);
                        border-radius: 6px;
                    }
                }
            }
        }

        .months, .years {
            padding: 1px;
        }

        .calendar-toolbar {
            border-bottom: 1px solid var(--calendar-border-color);
        }
    }

    &.compact {
        .calendar-header {
            .header-actions {
                right: 4px;
                top: 4px;
            }
            button {
                width: 16px;
                height: 16px;
            }
        }
        .months, .years {
            .month, .year {
                height: 52px;
            }
        }
    }
}

.wide-calendar(){
    flex-flow: row nowrap;

    .calendar-header {
        left: 0;
    }

    .calendar-footer {
        right: 0;
    }

    .calendar-header {
        width: 180px;
    }

    .calendar-footer {
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: stretch;
        border-top: none;
        border-left: 1px solid var(--calendar-border-color);
        width: 100px;

        * > {
            width: 100%;
            margin: 2px 0;
        }
    }

    &.compact {
        .calendar-header {
            width: 140px;
        }
        .calendar-content {
            width: 234px;
        }
    }
}

.calendar-wide {
    .wide-calendar();
}

.calendar {
    .day, .month, .year {
        transform: scale(1);
        transition: @transition-transform;
    }

    .to-animate {
        transform: scale(0);
    }
}

.calendar {
    .days .day, .months .month, .years .year {
        border: 1px solid transparent;
        &:hover {
            border: 1px solid var(--calendar-border-color);
        }
    }
}

.calendar {
    .events {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-flow: row wrap;
        height: auto;

        .event {
            width: 4px;
            height: 4px;
            background-color: red;
            margin: 1px;
        }
    }
}

.calendar {
    &:not(.calendar-wide).calendar-collapsed {
        .calendar-header {
            .caret.toggle-collapsed {
                transform: rotate(-90deg);
            }
        }
        .calendar-content, .calendar-footer {
            height: 0;
            overflow: hidden;
            padding: 0;
        }
        &.calendar-wide {
            .calendar-footer {
                width: 0;
            }
        }
    }
    &.calendar-wide.calendar-collapsed {
        .calendar-header {
            .caret.toggle-collapsed {
                transform: rotate(-90deg);
            }
        }
        .calendar-content, .calendar-footer {
            width: 0;
            overflow: hidden;
            padding: 0;
        }
    }
}