.pages.or {
    .or-group,
    .or-group-data,
    .or-repeat {
        // to hide group border and title if no or-appearance-pages class is set
        display: none;

        &.contains-current {
            display: block;
        }
    }

    .or-repeat[role="page"].current+.or-repeat-info {
        display: block;
    }

    [role="page"] {
        display: none;

        &.current {
            display: block;

            .or-group:not(.disabled),
            .or-group-data:not(.disabled),
            .or-repeat:not(.disabled) {
                display: block;
            }
        }

        &.hidden {
            opacity: 0;
        }

        &.fade-out {
            opacity: 0;

            @include transition-fast;
        }
    } // reduce whitespace
    #form-title {
        margin: 0;
    }
}

.pages~.form-footer {
    // reduce whitespace
    margin-top: 0;

    &.end {
        .btn {
            display: inline-block;
        }

        .next-page {
            display: none;
        }

        .logout,
        .draft {
            display: block;
        }
    }

    .logout {
        margin-bottom: 50px;
    }

    .btn {
        display: none;
    }

    .previous-page,
    .next-page {
        display: inline-block;

        &.disabled {
            display: none;
        }
    }

    .first-page,
    .last-page {
        display: inline-block;
    }

    .logout,
    .draft {
        display: none;
    }
}

.pages-toc {
    &__list {
        border: 1px solid black;
        @include paper-border(2px, $gray);

        position: absolute;
        right: 0;
        left: 0;
        top: 69px;
        width: 320px;
        height: 0; //hidden, with working animation
        max-height: calc(100vh - 100px);
        max-width: 100vw;
        margin: 0 auto;
        list-style: none;
        padding: 0;
        background: $question-bg;
        z-index: 1000;
        overflow: scroll;
        transition: height 1s ease-out;
        opacity: 0;
        li {
            border-top: 1px solid $gray;
            padding: 0;
            margin: 0;
            a {
                &:hover {
                    background: $brand-secondary-color;
                }
            }
            &>details {
                margin-left: 18px;
                summary {
                    padding: 8px 20px 8px 0px;
                }
                ul {
                    list-style: none;
                    padding-left: 0;
                }
                a {
                    padding-left: 18px;
                }
            }
        }
        a,
        a:link,
        a:visited {
            text-decoration: none;
            color: inherit;
            display: block;
            width: 100%;
            height: 100%;
            padding: 8px 20px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    }
    &__overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        background: $gray;
        width: 100%;
        height: 100%;
        z-index: 999;
        opacity: 0.5;
    }
    #toc-toggle {
        display: none;
        &:checked {
            &+.pages-toc__list {
                height: auto;
                opacity: 1;
            }
            &~.pages-toc__overlay {
                display: block;
            }
        }
    }
    label[for="toc-toggle"] {
        display: none;
        width: 27px;
        height: 10px;
        margin: 5px 0 5px 20px;
        background: repeating-linear-gradient($gray 2px, $gray 5px, transparent 5px, transparent 12px);
        &:hover {
            opacity: 0.7;
        }
    }
}