/**
 * hana+nils · Büro für Gestaltung
 * https://hananils.de · buero@hananils.de
 */

.toggle-switch,
.toggle-menu,
.toggle-close {
    display: none;
}

@supports (display: grid) {
    /* Switch */

    .toggle-switch {
        display: block;
        position: absolute;
        top: -100%;
        left: -100%;
    }

    .toggle-switch:checked + div .toggle-menu .expanded-text {
        display: inline;
    }

    .toggle-switch:checked + div .toggle-menu .collapsed-text {
        display: none;
    }

    .toggle-switch:not(:checked) + div .toggle-menu .expanded-text {
        display: none;
    }

    .toggle-switch:not(:checked) + div .toggle-menu .collapsed-text {
        display: inline;
    }

    /* Menu */

    .toggle-menu {
        display: flex;
        align-items: center;
        justify-content: right;
        position: fixed;
        top: 0;
        left: 20.4rem;
        width: 11.2rem;
        height: 5.12rem;
        padding-right: 4.2rem;
        color: #fff;
        font-size: 2.1rem;
        font-weight: 600;
        font-variant: small-caps;
        line-height: 1;
        text-align: right;
        letter-spacing: 0.05em;
        text-transform: lowercase;
        transition: opacity 0.1s ease-in 0.1s;
        opacity: 1;
        z-index: var(--z-index-top);
    }

    @media (min-width: 320px) {
        .toggle-menu {
            left: auto;
            right: 0rem;
        }
    }

    @media (min-height: 700px) and (min-width: 500px) {
        .toggle-menu {
            position: fixed;
            left: 0;
            right: auto;
            background-image: linear-gradient(to top, #39425d 0, #3f4a67 50%);
            transform: rotate(-90deg) translateX(-100%) translateY(0);
            transform-origin: left top;
            z-index: var(--z-index-surface);
        }

        .toggle-switch:checked + div .toggle-menu {
            transition: opacity 0.1s ease-in;
            opacity: 0;
        }
    }

    .toggle-menu::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 5.28rem;
        height: 5.28rem;
        background-image: url(../images/icon_menu.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 1rem;
    }

    .toggle-switch:checked + div .toggle-menu::after {
        background-image: url(../images/icon_close.svg);
    }

    @media (min-height: 700px) and (min-width: 500px) {
        .toggle-switch:checked + div .toggle-menu::after {
            background-image: url(../images/icon_menu.svg);
        }

        .toggle-menu::after {
            transform: rotate(-90deg) translateX(-100%);
            transform-origin: left top;
        }
    }

    /* Close */

    .toggle-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: -100%;
        bottom: 0;
        width: 100vw;
        color: #fff;
        font-size: var(--text-size);
        font-weight: 300;
        text-align: center;
        pointer-events: none;
        background-color: rgba(0, 0, 0, 0.6);
        transition: opacity 0.15s ease-in, transform 0.1s ease-in 1s;
        transform: translateX(0);
        opacity: 0;
        z-index: var(--z-index-overlay-back);
    }

    @media (min-height: 700px) and (min-width: 500px) {
        .toggle-close {
            padding: 5.4rem 5.4rem 5.4rem calc(5.4rem + 31rem);
        }
    }

    .toggle-close::after {
        content: '×';
        margin-left: 0.6ch;
        margin-top: 0.2ch;
    }

    .toggle-switch:checked + div .toggle-close {
        pointer-events: all;
        transition: opacity 0.15s ease-in 0.15s;
        transform: translateX(100%);
        opacity: 1;
    }

    @media (min-width: 1400px) {
        .layout:not(.is-collapsed) .toggle-close {
            display: none;
        }
    }
}