/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

body.sidebar-overlay {
    overflow: hidden;
}

.sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    width: 430px;
    height: 100%;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu,
        Cantarell, "Open Sans", "Helvetica Neue", "Roboto Rouble", sans-serif;
    transition: -webkit-transform 350ms ease-in-out;
    transition: transform 350ms ease-in-out;
    transition: transform 350ms ease-in-out, -webkit-transform 350ms ease-in-out;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    z-index: 1001;
}

.sidebar,
    .sidebar *,
    .sidebar *:before,
    .sidebar *:after {
        box-sizing: border-box;
    }

.sidebar_visible {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }

.sidebar__header {
        display: flex;
        min-height: 30px;
        margin-bottom: 48px;
    }

.sidebar__header-content {
        display: none;
    }

.sidebar__overlay {
        position: absolute;
        top: 0;
        left: -100vw;

        width: 100vw;
        height: 200vw;

        border: none;
        outline: none;

        content: "";

        visibility: hidden;

        transition: all 350ms ease-in-out;
        cursor: pointer;
    }

.sidebar__overlay_visible {
            visibility: visible;
        }

.sidebar__closer {
        margin: -9px;
        opacity: 0.6;
        transition: opacity 350ms;
    }

.sidebar__closer:hover {
            opacity: 1;
        }

.sidebar__closer .icon-button {
            width: 48px;
            height: 48px;
        }

.sidebar__inner {
        display: flex;
        flex-direction: column;
        height: 100%;

        padding: 24px;

        overflow-y: auto;
        overflow-x: hidden;
    }

.sidebar__content {
        position: relative;
        flex: 1;

        width: 100%;
    }

.sidebar__content > :first-child {
            margin-top: 0;
        }

@media screen and (max-width: 47.9375em) {
    .sidebar {
        width: 100%;
    }

        .sidebar_visible {
            overflow: hidden;
        }

        .sidebar__header {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 5;

            display: flex;
            align-items: center;
            justify-content: space-between;

            width: 100%;
            height: 48px;
            padding: 0 16px;
        }

        .sidebar__closer {
            margin: 0 0 0 -16px;
        }

        .sidebar__header-content {
            display: flex;
            justify-content: flex-end;
            width: 100%;

            overflow: hidden;
        }

        .sidebar__inner {
            padding: 0;
        }

        .sidebar__footer {
            position: relative;
            padding: 12px 16px;
        }

            .sidebar__footer:after {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;

                width: 100%;
                height: 24px;

                content: "";
                pointer-events: none;
                -webkit-transform: translateY(-100%);
                        transform: translateY(-100%);
            }

        .sidebar__action {
            display: flex;
            align-items: center;
        }

        .sidebar__overlay {
            display: none;
        }

        .sidebar__content {
            position: relative;

            padding: 72px
                16px 0;

            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
            -webkit-transform: translateZ(0);
                    transform: translateZ(0);
        }

    body.sidebar-visible {
        position: fixed;
        overflow: hidden;
    }
}

/*# sourceMappingURL=sidebar.css.map */
