.permit-use-calendars-wrapper {
    display: none;
}

#permit-use-calendars {
    --ab-green-025: #f8fffa;
    --ab-green-050: #f0f8f4;
    --ab-green-075: #e8f0ec;
    --ab-green-150: #d5e9de;
    --ab-green-200: #c0d8cc;
    --ab-green-400: #82b19a;
    --ab-green-500: #659980;
    --ab-green-600: #488165;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: .25rem;
    width: 100%;

    > .calendar {
        flex-grow: 0;
        width: fit-content;
        flex-direction: column;

        &.hidden {
            display: none;
        }
    }
}

/*@media screen and (min-width: 500px) {
  .calendars {
    flex-direction: row;
    max-width: max-content;
  }
}
*/
.calendar {
    color: var(--ab-green-600);
    text-align: center;
    font-weight: 500;
    width: min-content;
    background-color: rgb(10% 20% 10% / .15);
    overflow: hidden;
    padding: 3px;
    margin: 0;
    line-height: 1.2rem;

    .weekend {
        background-color: var(--ab-green-200);
    }
}

.day-of-week,
.date-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-content: center;
}

.day-of-week {
    margin-top: 0;

    > * {
        font-size: small;
        color: var(--ab-green-400);
        background-color: var(--ab-green-150);
        font-weight: 500;
        letter-spacing: 0.1ch;
        font-variant: small-caps;
        text-align: center;
    }
}

.date-grid {
    margin-top: 0rem;
    font-size: .83rem; /* match the <time> font size so we */
    height: 13.5ch;    /* can calculate this correctly */

    time {
        position: relative;
        border: 0;
        text-align: right;
        font-size: .83rem;
        padding: 0 .5ch;
        width: 2.0ch;
        height: 2.25ch;
        background-color: var(--ab-green-075);
        color: var(--ab-green-600);

        &:first-child {
            grid-column: var(--day1);
        }

        &.permit-day {
            &:not(.permit-begin):not(.permit-end):not(.permit-begin-end)::before {
                background-color: var(--ab-green-500);
                border-top: 1px solid var(--ab-green-600);
                border-bottom: 1px solid var(--ab-green-600);
                opacity: 0.5;
                position: absolute;
                top: 2px;
                left: 0;
                display: inline-block;
                width: 3ch;
                height: calc(100% - 4px);
                content: '';
            }

            &.permit-begin-end::before {
                background-color: var(--ab-green-400);
                border: 1px solid var(--ab-green-600);
                border-radius: 0.5ch;
                opacity: 0.5;
                position: absolute;
                top: 2px;
                left: 1px;
                right: 1px;
                display: inline-block;
                height: calc(100% - 4px);
                content: '';
            }

            &.permit-begin:not(.permit-end)::before {
                background-color: var(--ab-green-400);
                border-top: 1px solid var(--ab-green-600);
                border-bottom: 1px solid var(--ab-green-600);
                border-left: 1px solid var(--ab-green-600);
                border-top-left-radius: 10ch;
                border-bottom-left-radius: 0.5ch;
                opacity: 0.5;
                position: absolute;
                top: 2px;
                left: 1px;
                display: inline-block;
                width: calc(100% - 2px);
                height: calc(100% - 4px);
                content: '';
            }

            &.permit-end:not(.permit-begin)::after {
                background-color: var(--ab-green-400);
                border-top: 1px solid var(--ab-green-600);
                border-bottom: 1px solid var(--ab-green-600);
                border-right: 1px solid var(--ab-green-600);
                border-top-right-radius: 0.5ch;
                border-bottom-right-radius: 0.5ch;
                opacity: 0.5;
                position: absolute;
                top: 2px;
                right: 1px;
                display: inline-block;
                width: calc(100% - 2px);
                height: calc(100% - 4px);
                content: '';
            }

            &.permit-begin-future::before {
                background-color: var(--ab-green-400);
                border-top: 1px solid var(--ab-green-600);
                border-bottom: 1px solid var(--ab-green-600);
                border-left: 1px solid var(--ab-green-600);
                border-top-left-radius: 0.5ch;
                border-bottom-left-radius: 0.5ch;
                opacity: 0.5;
                position: absolute;
                top: 2px;
                left: 1px;
                display: inline-block;
                width: calc(100% - 2px);
                height: calc(100% - 4px);
                content: '';
            }

            &.permit-begin.permit-end {
                &::before {
                    background-color: var(--ab-green-400);
                    border-top: 1px solid var(--ab-green-600);
                    border-bottom: 1px solid var(--ab-green-600);
                    border-left: 1px solid var(--ab-green-500);
                    border-top-left-radius: 0.5ch;
                    border-bottom-left-radius: 0.5ch;
                    opacity: 0.5;
                    position: absolute;
                    top: 2px;
                    left: 2ch;
                    display: inline-block;
                    width: calc(1ch - 1px);
                    height: calc(100% - 4px);
                    content: '';
                }

                &::after {
                    background-color: var(--ab-green-400);
                    border-top: 1px solid var(--ab-green-600);
                    border-bottom: 1px solid var(--ab-green-600);
                    border-right: 1px solid var(--ab-green-500);
                    border-top-right-radius: 0.5ch;
                    border-bottom-right-radius: 0.5ch;
                    opacity: 0.5;
                    position: absolute;
                    top: 2px;
                    right: 1ch;
                    display: inline-block;
                    width: calc(2ch - 1px);
                    height: calc(100% - 4px);
                    content: '';
                }
            }
        }

        &.permit-blocked::before {
            display: inline-grid;
            justify-content: center;
            align-content: center;
            position: absolute;
            color: red;
            content: '⊘';
            opacity: 0.5;
            /*
            top: -.2ch;
            right: -.825ch;
            width: 3ch;
            height: 2.75ch;
            font-size: 4ch;
            */
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            font-size: 3.5ch;
            z-index: 1;
        }

        &.outside-window {
            color: var(--ab-green-200);
        }

        &.start-date {
            box-shadow: 0 0 4px 2px var(--ab-green-600);
            border-radius: .25ch;
            z-index: 2;
        }

        &.start-date-begin-partial {
            box-shadow: 0 0 4px 2px var(--ab-green-600);
            border-radius: .25ch;
            border-top-left-radius: 100%;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            z-index: 2;
            clip-path: inset(-15px 0 -15px -15px);
        }

        &.start-date-begin {
            box-shadow: 0 0 4px 2px var(--ab-green-600);
            border-radius: .25ch;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            z-index: 2;
            clip-path: inset(-15px 0 -15px -15px);
        }

        &.start-date-middle {
            box-shadow: 0 0 4px 2px var(--ab-green-600);
            z-index: 2;
            clip-path: inset(-15px 0 -15px 0);
        }

        &.start-date-end {
            box-shadow: 0 0 4px 2px var(--ab-green-600);
            border-radius: .25ch;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            z-index: 2;
            clip-path: inset(-15px -15px -15px 0);
        }

        &.unblocked {
            background-color: #99f0cc;
        }
    }
}