/*
    This is a button/bar that is initially collapsed to the right,
    and when you click it toggles "open" so someone can interact with it.
    (below you'll see an 'open' class:  that's what it's for!)
 */

/* z-index of 15000 because wizard-container has a z-index of 9999 */
.admin-debug-bar { font-size:14px; position:fixed; top: 200px; right:0px; padding: 10px 10px 40px; height: 80px; width:50px; z-index: 15000; }
.admin-debug-bar.open { height:auto; min-height:220px; width:200px; }
.admin-debug-bar.open a { text-decoration:underline; }
.admin-debug-bar.open .open-stuff, .admin-debug-bar .collapsed-stuff { display:block; }
.admin-debug-bar .open-stuff, .admin-debug-bar.open .collapsed-stuff { display:none; }
.admin-debug-bar .big-letter { font-size:32px; }
.admin-debug-bar a, .admin-debug-bar select { display:block; margin: 0px 0px 8px; }
.admin-debug-bar input[type="checkbox"] { margin: 0px; }
.admin-debug-bar section { margin-top: 16px; }
.admin-debug-bar select { padding: 4px; }
.admin-debug-bar h1 { font-size:16px; font-weight:bold; text-decoration:underline; padding-bottom:3px; }        /* XXX */
.admin-debug-bar h1 a { font-size:12px; font-weight:normal; float:right; }
.admin-debug-bar hr { margin: 12px 2px; }
.admin-debug-bar-close-button { position:absolute; bottom:10px; right:10px; }

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    .admin-debug-bar { top: auto; padding:5px; height:50px; width:50px; }
    .admin-debug-bar .big-letter { font-size:18px; }
}

/*  Mobile only  (40em is $small-range in scss/_media-queries.scss) */
@media (max-width: 40em) {
    .admin-debug-bar { font-size:12px; padding:3px; height:46px; width:28px; top:auto !important; bottom:0px; right: 0px; }
    .admin-debug-bar.open { width:auto }
    .admin-debug-bar .big-letter { font-size:20px; }
    .admin-debug-bar a, .admin-debug-bar select { margin: 0px 0px 4px; }
    .admin-debug-bar a { height:auto; margin-top:0px; }
    .admin-debug-bar h1 { font-size: 13px; padding-bottom: 0.5px; }
    .admin-debug-bar section { margin-top: 10px; }
    .admin-debug-bar select { font-size: 12px; height: 26px; padding: 2px; }
    .admin-debug-bar-close-button { font-size: 0.8em; padding: 20px 0px 20px 17px; z-index: 8; }
}