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


.calendar-schedule {
    $calendar-height-row: 60px;
    
    $border-style: solid lightgray 1px;

    display: grid;

    font-size: xx-small;

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

    .header {
        display: contents;
        font-weight: bold;
        div {
            width: 100%;
            text-align: center;
            box-sizing: border-box;
        }
        .rooms {
            display: flex;
            width: 100%;

            div {
                flex: 1 0 0;
                text-align: center;
            }
        }
        .main-column {
            border-right: $border-style;
        }
    }

    .table-row {
        height: $calendar-height-row;
        box-sizing: border-box;

        border-top: $border-style;
    }

    .times-left {
        border-right: $border-style;
    }
    .times-left, .times-right{
        width: 100%;
        padding: 0 5px;
    }

    .main-entry {
        position: relative;

        border-right: $border-style;

        .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%;
            padding: 1px 0;
            box-sizing: border-box;
            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;
}

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