/* GT7 Theme Editor: mock preview stylesheet. Our own screens for the theme editor preview; every
   geometry value comes from measuring the real apps on a GT7 (480 x 272) and a GT7 Light (320 x 240).
   The 15 --g7-* variables are consumed exactly where the real Leisure apps consume them. */

@font-face { font-family: "Noto Sans Light"; src: url("../fonts/NotoSans-Light.ttf") format("truetype"); font-weight: 300; }
@font-face { font-family: "Noto Sans"; src: url("../fonts/NotoSans-Light.ttf") format("truetype"); font-weight: 300; }

/* shared part: fonts, screen switching, layout utilities, icon box model. Each app page also links
   the stylesheet of its app family: mock-new.css (Access, Advanced Access), mock-old.css (Time, Info). */

html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }
html { font-size: 16px; }
body { font-family: "Noto Sans Light", "Noto Sans", sans-serif; position: relative; -webkit-user-select: none; user-select: none; }
*, *::before, *::after { box-sizing: border-box; }

/* one section per screen, switched by html[data-g7-screen] */
section.g7-screen { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }
html[data-g7-screen="idle"] section[data-screen="idle"],
html[data-g7-screen="granted"] section[data-screen="granted"],
html[data-g7-screen="denied"] section[data-screen="denied"],
html[data-g7-screen="locked"] section[data-screen="locked"],
html[data-g7-screen="error"] section[data-screen="error"],
html[data-g7-screen="confirm"] section[data-screen="confirm"],
html[data-g7-screen="number"] section[data-screen="number"],
html[data-g7-screen="selection"] section[data-screen="selection"],
html[data-g7-screen="duration"] section[data-screen="duration"],
html[data-g7-screen="timer"] section[data-screen="timer"],
html[data-g7-screen="info"] section[data-screen="info"],
html[data-g7-screen="welcome"] section[data-screen="welcome"],
html[data-g7-screen="function"] section[data-screen="function"],
html[data-g7-screen="choice"] section[data-screen="choice"],
html[data-g7-screen="balances"] section[data-screen="balances"],
html[data-g7-screen="language"] section[data-screen="language"] { display: block; }

/* background images of the theme (background.jpg / background_idle.jpg) */
img.background { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
img.background[hidden] { display: none; }

/* layout utilities (the real apps are laid out with these bootstrap-style classes; 1rem = 16px) */
.d-flex { display: flex; }
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-grow-1 { flex-grow: 1; }
.justify-content-start { justify-content: flex-start; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.align-items-start { align-items: flex-start; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }
.w-100 { width: 100%; }
.w-55 { width: 55%; }
.w-50 { width: 50%; }
.w-45 { width: 45%; }
.w-30 { width: 30%; }
.w-20 { width: 20%; }
.h-100 { height: 100%; }
.h-60 { height: 60%; }
.h-25 { height: 25%; }
.h-20 { height: 20%; }
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.mr-2 { margin-right: .5rem; }
.ml-2 { margin-left: .5rem; }
.p-2 { padding: .5rem; }
.px-1 { padding-left: .25rem; padding-right: .25rem; }
.px-2 { padding-left: .5rem; padding-right: .5rem; }
.py-1 { padding-top: .25rem; padding-bottom: .25rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.fill-screen { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.flex-fill { flex: 1 1 auto; }
.ml-3 { margin-left: 1rem; }
.text-red { color: var(--g7-color-no); }

/* icon boxes: the same box model as the icon library the real apps use, our own drawings inside */
.svg-inline--fa { display: inline-block; height: 1em; overflow: visible; vertical-align: -.125em; }
.fa-w-6 { width: .375em; }
.fa-w-10 { width: .625em; }
.fa-w-12 { width: .75em; }
.fa-w-14 { width: .875em; }
.fa-w-16 { width: 1em; }
.fa-w-20 { width: 1.25em; }
.fa-fw { width: 1.25em; text-align: center; }
.fa-2x { font-size: 2em; }
.fa-3x { font-size: 3em; }
.fa-5x { font-size: 5em; }
.fa-lg { font-size: 1.25em; line-height: .05em; vertical-align: -.225em; }
.fa-8x { font-size: 8em; }
fa-icon { display: inline; }