/* Horizontal scroll pages */

:root {
    --l-scroll-width: 100vw;
    --l-scroll-height: 100vh;
}

.horizontal-scroll-wrapper {
    /* Switch width and height to compensate rotation by 90deg */
    width: var(--l-scroll-height);
    height: var(--l-scroll-width);

    transform: rotate(-90deg) translateY(calc(-1 * var(--l-scroll-height)));
    transform-origin: right top;

    background-color: var(--c-background-darker);

    overflow-x: hidden;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;

    /* Disable Scrollbar... */
    -ms-overflow-style: none; /* ... for Internet Explorer, Edge */
    scrollbar-width: none; /* ... for Firefox */
}

::-webkit-scrollbar {
    display: none; /* ... for Chrome, Safari, and Opera */
}


.horizontal-scroll-page {
    width: var(--l-scroll-width);
    height: var(--l-scroll-height);

    margin-bottom: calc(var(--l-scroll-width) - var(--l-scroll-height)); /* Compensation for difference in height and width */
    transform: rotate(90deg) translateY(calc(-1 * var(--l-scroll-height)));
    transform-origin: left top;

    overflow-x: hidden;
    overflow-y: scroll;
    scroll-snap-align: start;
    scroll-snap-stop: always;

    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;

    padding: var(--gap-3xl);
    /* Left Padding: left margin of nav + nav width + regular padding lol o.O */
    padding-left: calc(
        var(--gap-s)
        + calc(2 * var(--size-icons) + 2 * (var(--gap-xs) + var(--size-borders)))
        + var(--gap-3xl));
    gap: var(--gap-4xl);
}


/* Disable scrolling when popup is opened */

.horizontal-scroll-page:has(.overlay:target) {
    overflow-y: hidden;
}

.horizontal-scroll-wrapper:has(.overlay:target) {
    overflow-y: hidden;
}