@import "foundation/base";

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

#qrformdiv {
    text-align: left;
    padding: .5em;
    clear: both;

    @media #{$medium-up} {
        padding: .5em 1em;
        max-width: 52rem;
    }

    // .de means warnings/alerts.
    .de {
        font-size: small;
        width: 100%;
    }

    input, button, textarea, select {
        margin-bottom: 3px;
        margin-top: 0;
    }

    input[type="button"], button {
        // Avoids double-tap zoom when tapping "random" repeatedly
        touch-action: manipulation;
    }

    // Avoid *dramatic woodchuck* zoom on mobile
    @media (pointer: coarse) {
        select, textarea, input[type="text"] {
            font-size: 16px;
        }
    }

    // If no grid: vertical stack. ID -> icon preview -> icon controls.
    .qr-meta {

        display: grid;
        grid-column-gap: 5px;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "name name"
            "icon more"
            "icon iconctl";
        .block-icon {
            margin-bottom: 3px;
            grid-area: icon;
            align-self: self-end;
            width: 55px;
            height: 55px;

            button {
                width: 100%;
                height: 100%;
                padding: 0;
            }
        }
        .block-icon-controls {
            grid-area: iconctl;
        }
        .ljuser {
            grid-area: name;
            margin-bottom: 2px;
            font-size: smaller;
        }
        #submitmoreopts {
            grid-area: more;
            justify-self: start;
            align-self: self-end;
        }
    }

    .qr-subject {
        display: flex;
        align-items: flex-end;

        #subject {
            // size=50 in html is a presentational hint for width, so need to
            // set width to SOMETHING to keep it from messing up the flex.
            width: 70%;
            min-width: 0; // let it shrink
            flex-grow: 1;
            flex-shrink: 1;
        }
    }

    .qr-markup {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        & > div {
            display: inline-block;
        }
    }

    .qr-body {
        #body {
            width: 100%;
            -webkit-overflow-scrolling: touch;
        }
    }

    .qr-footer {
        display: flex;
        flex-direction: row-reverse;
        flex-wrap: wrap;
        align-items: flex-start;

        input {
            margin-left: 5px;
            float: right;

            @supports (display: flex) {
                float: none;
            }
        }
    }

    textarea, select, input[type="text"] {
        margin-right: 0; // Fix for old site scheme.
    }

    .invisible {
        // Fix for old site scheme; a ".comment .invisible" rule was setting position: relative.
        position: absolute;
    }
}