@import './loader.css';

:root {
    --nav-height: 2.5rem;
}

.github-embed {
    &-main {
        @import "../../node_modules/highlight.js/styles/tomorrow.css";

        width: 100%;
        height: 100%;
        border: solid 1px #C6CACD;
        position: relative;
        box-sizing: border-box;

        * {
            box-sizing: border-box;
        }
    }

    &-nav {
        border-bottom: solid 1px #C6CACD;
        z-index: 1;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        width: 100%;
        position: absolute;
        top: 0;
        height: var(--nav-height);

        &-link {
            line-height: var(--nav-height);
            padding: 0 1rem;
            color: #525252;
            cursor: pointer;

            &-shown {
                font-weight: bold;
            }
        }

        &-on-github {
            float: right;
            padding: 0 1rem;
            line-height: var(--nav-height);
        }
    }

    &-frames {
        padding: var(--nav-height) 0;
        top: 0;
        width: 100%;
        height: 100%;
        position: absolute;

        iframe, pre {
            width: 100%;
            height: 100%;
            overflow: auto;
            margin: 0;
        }

        iframe {
            border: none;
        }

        pre {
            padding: 1rem;
        }
    }

    &-footer {
        border-top: solid 1px #C6CACD;
        padding: 0 1rem;
        line-height: var(--nav-height);
        z-index: 1;
        overflow-x: auto;
        white-space: nowrap;
        position: absolute;
        bottom: 0;
        width: 100%;
        z-index: 1;
        text-align: right;
    }

    &-error {
        position: absolute;
        z-index: 1;
        top: 50%;
        width: 100%;
        text-align: center;
        color: red;
    }
}
