@import "src/app/core/scss/fuse";
@import "node_modules/angular-calendar/scss/angular-calendar";

.cal-month-view {

    .cal-header {

        .cal-cell {
            font-weight: 500;
        }
    }

    .cal-day-cell {

        &.cal-open {
            @include mat-elevation(3);
        }
    }

    .cal-open-day-events {
        background: whitesmoke;
        box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.13);
        padding: 0;
        display: flex;
        flex-direction: column;

        > div {
            padding: 0 16px;
            margin: 8px 16px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: start;
            background-color: white;
            @include mat-elevation(1);
            transition: box-shadow 300ms ease;

            &:first-of-type {
                margin-top: 24px;
            }

            &:last-of-type {
                margin-bottom: 24px;
            }

            &:hover {
                @include mat-elevation(3);
            }

            .cal-event {
                top: 0;
                margin: 0;
            }

            mwl-calendar-event-title {
                flex: 1;

                .cal-event-title {
                    display: block;
                    padding: 21px 24px;
                    line-height: 1;
                    text-decoration: none;
                    color: black;
                }
            }

            mwl-calendar-event-actions {

                .cal-event-actions {
                    display: flex;
                    flex-direction: row;
                    align-items: center;

                    .cal-event-action {
                        display: block;
                        line-height: 1;
                        padding: 8px;
                    }
                }
            }

        }
    }
}

.cal-week-view {

    .cal-header > b {
        font-weight: 500;
    }

    .cal-event {
        display: flex;
        flex-direction: row;
        align-items: center;

        mwl-calendar-event-title {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
            order: 0;

            .cal-event-title {
                display: block;
                //padding: 21px 24px;
                line-height: 1;
                text-decoration: none;
                color: black;
            }
        }

        mwl-calendar-event-actions {
            order: 1;

            .cal-event-actions {
                display: flex;
                flex-direction: row;
                align-items: center;

                .cal-event-action {
                    display: block;
                    line-height: 1;
                    padding: 8px;
                }
            }
        }
    }
}

.cal-day-view {

    .cal-time {
        font-weight: 500;
    }

    .cal-event {
        display: flex;
        flex-direction: row;

        mwl-calendar-event-title {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
            order: 0;

            .cal-event-title {
                display: block;
                height: 26px;
                line-height: 26px;
                text-decoration: none;
                color: black;
            }
        }

        mwl-calendar-event-actions {
            order: 1;

            .cal-event-actions {
                display: flex;
                flex-direction: row;
                align-items: center;

                .cal-event-action {
                    display: block;
                    line-height: 1;
                    padding: 4px;
                }
            }
        }
    }
}

#calendar {
    background: #FFFFFF;
    height: 100%;

    .header {
        height: 200px;
        min-height: 200px;
        max-height: 200px;
        padding: 24px;
        position: relative;
        background-size: 100% auto;
        background-position: 0 50%;
        background-repeat: no-repeat;
        background-color: #FAFAFA;
        color: #FFFFFF;

        &:before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1;
            background: rgba(0, 0, 0, 0.45);
        }

        &.Jan {
            background-image: url('/assets/images/backgrounds/january.jpg');
            background-position: 0 45%;
        }
        &.Feb {
            background-image: url('/assets/images/backgrounds/february.jpg');
            background-position: 0 50%;
        }
        &.Mar {
            background-image: url('/assets/images/backgrounds/march.jpg');
            background-position: 0 45%;
        }
        &.Apr {
            background-image: url('/assets/images/backgrounds/april.jpg');
            background-position: 0 48%;
        }
        &.May {
            background-image: url('/assets/images/backgrounds/may.jpg');
            background-position: 0 47%;
        }
        &.Jun {
            background-image: url('/assets/images/backgrounds/june.jpg');
            background-position: 0 48%;
        }
        &.Jul {
            background-image: url('/assets/images/backgrounds/july.jpg');
            background-position: 0 3%;
        }
        &.Aug {
            background-image: url('/assets/images/backgrounds/august.jpg');
            background-position: 0 61%;
        }
        &.Sep {
            background-image: url('/assets/images/backgrounds/september.jpg');
            background-position: 0 58%;
        }
        &.Oct {
            background-image: url('/assets/images/backgrounds/october.jpg');
            background-position: 0 50%;
        }
        &.Nov {
            background-image: url('/assets/images/backgrounds/november.jpg');
            background-position: 0 46%;
        }
        &.Dec {
            background-image: url('/assets/images/backgrounds/december.jpg');
            background-position: 0 43%;
        }

        .header-content {
            height: 100%;

            .header-top {
                position: relative;
                z-index: 2;

                .logo {

                    .logo-icon {
                        margin-right: 16px;
                    }

                    .logo-text {
                        font-size: 24px;
                    }
                }
            }

            .header-bottom {
                position: relative;
                z-index: 2;

                .title {
                    font-size: 20px;
                    min-width: 160px;
                    text-align: center;
                    font-weight: 500;
                }
            }
        }

        .add-event-button {
            position: absolute;
            right: 18px;
            bottom: -32px;
            z-index: 10;
        }

        md-icon {
            color: #FFFFFF;
        }
    }

    .content {
        flex: 1;
        overflow: auto;
        padding: 24px;
    }
}
