@use './responsive.scss' as r;
@use './colors.scss' as *;

$calendar-height-row: 60px;

.calendar-schedule {
    display: grid;

    font-size: xx-small;

    @include r.media-large {
        & {
            font-size: x-small;
        }
    }

    .header {
        display: contents;
        font-weight: bold;
        div {
            justify-self: center;
        }
        .rooms {
            display: flex;
            width: 100%;

            div {
                flex: 1 0 0;
                text-align: center;
            }
        }
    }
    
    .times {
        display: contents;
        div {
            height: 60px;
        }
    }

    .table-row {
        height: $calendar-height-row;

        border-top: solid lightgray 1px;
    }

    .main-entry {
        position: relative;

        .event {
            position: absolute;
            z-index: 1;

            top: calc($calendar-height-row * var(--minutes) / 60.0);
            height: calc($calendar-height-row * var(--duration) / 60.0);

            width: 30%;
            box-sizing: border-box;
            padding: 1px 0;
            // overflow: hidden;

            --fg-color: black;

            &.room-vorne {
                --bg-color: var(--color-vhvorne);
                left: 2.5%;
            }
            &.room-mitte {
                --bg-color: var(--color-vhmitte);
                left: 35%
            }
            &.room-hinten {
                --bg-color: var(--color-vhhinten);
                --fg-color: white;
                left: 67.5%;
            }

            div {
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                padding: 3px;
                border-radius: 4px;

                color: var(--fg-color);
                background-color: var(--bg-color);
            }

        }
    }

    .cal-main-content {
        grid-row: 3 / 100;
        position: relative;
        
        &.day-0 {
            grid-column: 2;
        }
        &.day-1 {
            grid-column: 3;
        }
        &.day-2 {
            grid-column: 4;
        }
        // grid-column: 2;

        .event {
            position: absolute;
            
            width: 30%;
            // height: 100%;
            box-sizing: border-box;
            padding: 1px 0;
            overflow: hidden;

            --fg-color: black;

            &.room-vorne {
                --bg-color: var(--color-vhvorne);
                left: 2.5%;
            }
            &.room-mitte {
                --bg-color: var(--color-vhmitte);
                left: 35%
            }
            &.room-hinten {
                --bg-color: var(--color-vhhinten);
                --fg-color: white;
                left: 67.5%;
            }

            div {
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                padding: 3px;
                border-radius: 4px;

                color: var(--fg-color);
                background-color: var(--bg-color);
            }
        }
    }

}

.calendar-grid-2-days {
    grid-template-columns: auto repeat(2, 1fr) auto;

    .cal-main-content {
        // grid-column-end: span 2;
    }
}

.calendar-grid-3-days {
    grid-template-columns: auto repeat(3, 1fr) auto;

    .cal-main-content {
        // grid-column-end: span 3;
    }
}

// Legacy styling
.calendar-manual {
    font-size: xx-small;

    @include r.media-large {
        font-size: small;
    }

    tr {
        height: 20px;

        &.first-min {
            border-top: solid lightgray 1px;
        }

        &:nth-of-type(n) {
            background-color: unset;
        }

        .time {
            vertical-align: top;
        }
        
        .time:last-of-type, .first-col-of-room {
            border-left: solid lightgray 1px;
        }

        .day-title {
            text-align: center;
        }
    }

    .calendar-block {
        position: relative;

        .calendar-block-entity {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            padding: 1.5px;
            box-sizing: border-box;

            
            &.height-1 {
                height: 20px;
            }

            &.height-2 {
                height: 40px;
            }

            &.height-3 {
                height: 60px;
            }

            &.height-4 {
                height: 80px;
            }

            &.height-5 {
                height: 100px;
            }

            &.height-6 {
                height: 120px;
            }

            &.height-7 {
                height: 140px;
            }

            &.height-8 {
                height: 160px;
            }

            &.height-9 {
                height: 180px;
            }

            &.height-10 {
                height: 200px;
            }

            .room-block {
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                padding: 3px;
                overflow: hidden;
            }

            .room-vorne {
                background-color: var(--color-vhvorne);
            }

            .room-mitte {
                background-color: var(--color-vhmitte);
            }

            .room-hinten {
                background-color: var(--color-vhhinten);
                color: white;
            }
        }
    }
}