@import dredgepos.keyboards

#leftColumn
    @include flex-column
    flex-basis: 30%
    height: 100%
    background-color: grey

    > *
        @include flex-column-item

    .tableHeading
        @include flex
        color: black
        background-color: white
        flex-basis: 5%

    .tableInfo
        @include flex
        flex-basis: 5%

        > *
            @include flex-item
            @include flex

    .orderBox
        flex-basis: 75%
        background: var(--global-bgcolor)

    .orderBoxInfo
        flex-basis: 5%
        background-color: white

    .orderBoxFooter
        flex-basis: 10%

#rightColumn
    @include flex-column
    height: 100%
    flex-basis: 70%
    background-color: var(--global-bgcolor)
    border-left: 2px solid var(--global-border-color)

    #topHalf
        @include flex-column
        @include flex-column-item
        flex-basis: 30%
        flex-grow:  0
        flex-shrink: 0

        .utilityButtons
            @include flex-column-item
            @include flex
            flex-basis: 20%

            > *
                @include flex-item
                @include flex
                flex-basis: 30%

            .logoutButton
                flex-basis: 10%


        .functionButtons
            @include flex-column-item
            @include flex
            flex-basis: 80%

            > *
                @include flex-item
                @include flex-column

                > *
                    @include flex-column-item


    #pageList
        @include flex
        @include flex-column-item
        flex-basis: 10%
        background-color: magenta
        flex-grow: 0
        flex-shrink: 0

        > *
            @include flex-item
            border-bottom: solid 2px var(--global-border-color)

        .active
            border-bottom: none

    #pageContainer
        @include flex-column
        @include flex-column-item
        justify-content: flex-end
        flex-basis: 45%
        height: 50%
        scrollbar-width: none
        -ms-overflow-style: none

        ::-webkit-scrollbar
             display: none

        .pageGroup
            /*display: inline-flex*/
            @include flex-column-item
            flex-basis: 100%
            flex-grow: 0
            overflow-x: auto
            display: none

            .gridPage
                width: 100%
                height: 100%
                flex-shrink: 0
                flex-grow: 0
                display: grid
                grid-template-columns: repeat(6, 1fr)
                grid-template-rows: repeat(8, 1fr)

                .doubleWidth
                    width: calc(200%)
                    z-index: 10

                .doubleHeight
                    height: calc(200%)
                    z-index: 10

                .hasImage
                    .buttonImg
                        background-repeat: no-repeat
                        background-size: contain
                        background-position: center
                        background-origin: content-box

                .hasImage.normal
                    font-size: 0.8em
                    .buttonImg
                        flex-basis: 40%
                        height: 100%
                        padding: 0.7em
                        justify-content: flex-end

                    .text
                        @include flex
                        justify-content: flex-start
                        flex-basis: 60%
                        height: 100%

                .hasImage.doubleHeight
                    @include flex-column

                    .buttonImg
                        padding: 0.6em
                        flex-basis: 80%
                        width: 100%

                    .text
                        @include flex
                        flex-basis: 20%
                        width: 100%

                .hasImage.doubleWidth
                    flex-direction: row
                    .buttonImg
                        @include flex
                        flex-basis: 30%
                        height: 100%
                        padding-top: 2%

                    .text
                        @include flex
                        flex-basis: 70%
                        height: 100%
                        justify-content: flex-start

                .hasImage.doubleHeight.doubleWidth
                    flex-direction: row

                    .buttonImg
                        @include flex
                        flex-basis: 50%
                        height: 100%


                    .text
                        @include flex
                        flex-basis: 50%
                        height: 100%

    .pageNavigation
        @include flex
        @include flex-column-item
        flex-basis: 15%

        > *
            @include flex-item