pdf-frame {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns:auto 1fr auto;
    grid-template-rows: auto 1fr auto auto;
    overflow: hidden;
    background: gray;

    & > .title {
        position: absolute;
        left: 5px;
        top: 5px;
    }

    & > .preview {
        display: flex;
        grid-row: 2;
        grid-column: 1;
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        gap: 10px;
        & > * {
            cursor: pointer;
            padding: 10px;
            max-height: 30vh;
            max-width: 20vw;
            &:hover {
                background: highlight;
            }
        }
    }

    & > .viewer {
        grid-row: 2;
        grid-column: 2;
        overflow: auto;
        gap: 10px;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        & > * {
            padding: 10px;
        }
    }

    & > .toolbar {
        grid-column: 1 / span 3;
        grid-row: 1;
        display: flex;
        flex-direction: row;
        gap: 10px;
        background-color: lightgray;

        & > * {
            flex: 1 1 33%;
        }

        & > .left {
            margin-right: auto;
        }

        & > .middle {
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 5px;
            justify-content: center;
            & > i {
                padding: 5px;
                cursor: pointer;
            }
            & > input {
                max-width: 50px;
            }
        }

        & > .right {
            display: flex;
            margin-left: auto;
            align-items: center;
            justify-content: end;
            gap: 5px;
            & > i {
                cursor: pointer;
                padding: 5px;
            }
        }
    }

    &[align-left=true] {
        & > .viewer {
            align-items: start;
        }
    }

    @media (max-width: 500px) {
        & > .preview {
            grid-row: 3;
            grid-column: 2 / span 2;
            max-height: 30vh;
            flex-direction: row;
            flex-wrap: nowrap;
            overflow-x: auto;
            overflow-y: hidden;
        }
    }

}

body[stop-overflow] {
    overflow: hidden;
}