AlexAegis/loreplotter

@import '../style/responsive.scss';

:host {
    overflow: auto;
    display: grid;

    #content {
        position: relative;
        display: grid;
        @include respond-to(small, medium) {
            grid-template-columns: 1.5rem auto 1.5rem;
        }
        @include respond-to(large) {
            grid-template-columns: auto minmax(40rem, 60vw) auto;
        }

        #content-main {
            grid-column: 2;
        }
    }

    .controls {
        display: inline-flex;
        flex-direction: column;
        height: 100%;
        > .scene-control {
            bottom: 210px;
        }
        > .time-control {
            position: fixed;
            bottom: 210px;
            right: 1rem;
            display: inline-flex;
            flex-direction: column;
            .inlineFromRight {
                display: inline-flex;
                direction: rtl;
                margin-bottom: 0.5rem;
                > * {
                    margin-left: 0.5rem;
                }
            }
        }
        > .light-control {
            position: fixed;
            bottom: 210px;
            display: inline;
        }
    }
}