@import "../../../../../../assets/css/abstracts/custom-variables.scss";


// Hides calendar items if there height exceeds the height of the wrapper
.grid-stack.grid-stack .grid-stack-item.tile-mini-calendar-component {
     > .grid-stack-item-content > .content-block {
        overflow: hidden;
        border-radius: var(--theme-rounded-corners);
    }
}

$fade-speed: .15s;

// ------------------------------
// ---- HEADER -------------
// ------------------------------
.card-header-calendar {
    a {
        color: #fff;
    }

    .calendar-title-wrapper {
        position: relative;
        overflow: hidden;
        display: inline-block;
        vertical-align: bottom;
        width: calc(100% - 46px);
        white-space: nowrap;
        text-align: center;

        .previous-title, .next-title {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
        }
        // ---------
        // ---- PREVIOUS CALENDAR
        // --------
        .previous-title {
            margin-left: -110%;
        }
        // ---------
        // ---- NEXT CALENDAR
        // --------
        .next-title {
            margin-left: 110%;
        }

    }

}

// Sets color of calendar header and buttons based on theme variables
.mini-calendar .current,
.mini-calendar .date-title,
.mini-calendar .direction-button {
    background: var(--theme-panel-header-bg);
    color: var(--theme-panel-header-color);
    border-bottom-color: var(--theme-panel-header-border);
}

// ------------------------------
// ---- CODE TO SLIDE PREV/NEXT TITLE IN ON CLICK
// ------------------------------
.mini-calendar {
    // ---------
    // ---- PREVIOUS TITLE - SLIDE IN
    // --------
    &.in-prev {
        .previous-title {
            margin-left: 0;
            transition: $fade-speed;
        }
        .current-title{
            transform: translate(100%, 0 );
            transition: $fade-speed;
        }
    }
    // ---------
    // ---- NEXT TITLE  - SLIDE IN
    // --------
    &.in-next {
        .next-title {
            margin-left: 0;
            transition: $fade-speed;
        }
        .current-title {
            transform: translate(-100%, 0);
            transition: $fade-speed;
        }
    }
}





// -------------
// ---- CALENDAR NAV BUTTONS -------------
// -------------
.card-header-calendar {
    .direction-button {
        display: inline-block;
        transition: .3s;
        cursor: pointer;
        position: relative;
        height: 22px;
        width: 22px;
        &::after, &::before {
            content: '';
            position: absolute;
            width: 11px;
            height: 4px;
            background: currentColor;
            border-radius: 10px;
        }
        &::before {
            top: 7px;
        }
        &::after {
            top: 12px;
        }
    }

    .next {
        &::after, &::before {
            right: 0;
        }
        &::before {
            transform: rotate(45deg);
        }
        &::after {
            transform: rotate(-45deg);
        }
    }

    .previous {
        &::after, &::before {
            left: 0;
        }
        &::before {
            transform: rotate(-45deg);
        }
        &::after {
            transform: rotate(45deg);
        }
    }


}

.card-header-calendar .direction-button:hover {
    transition: .3s;
    opacity: 0.7;
}


// ------------------------------
// ---- DAY LABELS -------------
// ------------------------------
.calendar {
    table.table  {
        thead tr.day-labels > td {
            background: $gray-100;
            border-left: 1px solid $gray-200;
            border-right: 1px solid $gray-200;
            border-bottom: 1px solid $gray-200;
            font-weight: 500;
            padding: 4px 0;
            color: $gray-700;
            text-align: center;
        }
    }
}


// ------------------------------
// ---- POSITION OF ADDITIONAL CALENDARS
// ------------------------------
.calendar-wrapper {
    position: relative;
    overflow: hidden;
    min-height: 265px;
    .next-calendar, .previous-calendar {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background: #fff;
    }
    // ---------
    // ---- PREVIOUS CALENDAR
    // --------
    .previous-calendar {
        margin-left: -100%;
    }
    // ---------
    // ---- NEXT CALENDAR
    // --------
    .next-calendar {
        margin-left: 100%;
    }
}


// ------------------------------
// ---- CODE TO SLIDE PREV/NEXT CALENDARS IN ON CLICK
// ------------------------------
.mini-calendar {

    // ---------
    // ---- PREVIOUS CALENDAR - SLIDE IN
    // --------
    &.in-prev {
        .previous-calendar {
            margin-left: 0;
            transition: $fade-speed;
        }
        .current-calendar {
            transform: translate(100%, 0 );
            transition: $fade-speed;
        }
    }
    // ---------
    // ---- NEXT CAENDAR - SLIDE IN
    // --------
    &.in-next {
        .next-calendar {
            margin-left: 0;
            transition: $fade-speed;
        }
        .current-calendar {
            transform: translate(-100%, 0);
            transition: $fade-speed;
        }
    }
}




// ------------------------------
// ---- CALENDAR TABLE STYLING
// ------------------------------
.mini-calendar {
    overflow: hidden;
    table.table {
        margin-bottom: 0;
        tbody + tbody {
            border-top: 0;
        }

        > tbody > tr > th,
        > tbody > tr > td {
            padding: 0;
            border: 1px solid $gray-200;
        }
    }
}



// ------------------------------
// ---- CALENDAR LINK STYLING
// ------------------------------
.mini-calendar {
    table.table {
        a {
            display: block;
            padding: 4px 2px 12px;
            position: relative;
            &:hover {
                text-decoration: none;
                opacity: 0.7;
            }
        }

    }
}



// ------------------------------
// ---- CALENDAR LINK STYLING - OTHER MONTH
// ------------------------------
.mini-calendar {
    table.table {
        a.other_month {
            color: $gray-400;
        }
    }
}


// ------------------------------
// ---- CALENDAR - CURRENT DAY - LINK STYLE
// ------------------------------
.mini-calendar {
    table.table {
        .current-day {
            background: $gray-700;
            padding: 0;
            border-radius: 350px;
            display: inline-block;
            font-weight: 500;
            color: #fff;
            height: 22px;
            width: 22px;
            margin: 4px auto 0;
        }
    }
}


// ------------------------------
// ---- CALENDAR UPCOMING EVENT DOT
// ------------------------------

.upcoming-event::before {
    content: "";
    background: var(--theme-link-color);
    position: absolute;
    left: 50%;
    bottom: 5px;
    height: 4px;
    width: 4px;
    font-size: 30px;
    margin-left: -2px;
    border-radius: 350px;
}

// ------------
// ---- CALENDAR UPCOMING EVENT DOT - CURRENT DAY SPECIFIC STYLING
// -----------
.upcoming-event.current-day::before {
    bottom: -7px;
}


// @keyframes spin1 {
//     from {
//         transform: rotate(45deg);
//     }
//     to {
//         transform: rotate(-360deg);
//     }
// }
// @keyframes spin2 {
//     from {
//         transform: rotate(-45deg);
//     }
//     to {
//         transform: rotate(360deg);
//     }
// }


@keyframes jigRight {
    0% {
        margin-right: 0;
    }
    50% {
        margin-right: -3px;
    }
    100% {
        margin-right: 0;
    }
}
@keyframes jigLeft {
    0% {
        margin-left: 0;
    }
    50% {
        margin-left: -3px;
    }
    100% {
        margin-left: 0;
    }
}

// ------------------------------
// ---- LOADING
// ------------------------------
.mini-calendar.loading {
    &.in-next .next {
        &::after, &:before {
            animation-duration: 0.5s;
            animation-iteration-count: infinite;
            animation-name: jigRight;
        }
    }

    &.in-prev .previous {
        &::after, &:before {
            animation-duration: 0.5s;
            animation-iteration-count: infinite;
            animation-name: jigLeft;
        }
    }

}



// ------------------------------
// ---- POPOVER WINDOW
// ------------------------------
.mini-calendar-event-modal {
    z-index: 20;
    padding: 15px;
    top: 0;
    left: 0;
    right: 0;
    position: absolute;
    background: white;
    border-bottom: 1px solid $gray-400;
    box-shadow: 0 0 8px rgba(0,0,0,.1);
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;

    .header {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .event-list {
        margin-bottom: 10px;
        max-height: 165px;
        overflow: auto;
        .event {
            padding: 2px 8px;
            cursor: pointer;
            & + .event {
                margin-top: 2px;
            }
            .no-event {
                padding: 0;
            }
        }
    }
}

// ------------------------------
// ---- POPOVER WINDOW - ACTIVE (SHOWING)
// ------------------------------
.mini-calendar-event-modal.active {
    visibility: visible;
    opacity: 1;
    transition: 0.3s;
}
