@import url('asset/glyphicons/glyphicons.css');

@import url('theme/reset.css');
@import url('theme/layout.css');
@import url('theme/style.css');

/* layout */

#view {
   width:100%;
   height:100%;
}
form[name='file'] {
   position:fixed;
   left:2em;
   top:2em;
}
form[name='draw'] {
   position:fixed;
   right:1em;
   top:2em;
}
form[name='view'] {
   position:fixed;
   left:2em;
   bottom:1em;
}

/* main */

body {
   overflow:hidden;
}
#view {
   display:grid;
   grid-template-rows:1em 1fr;
   grid-template-columns:1em 1fr;
   grid-template-areas:'. coordinate-x' 'coordinate-y view';
   /* justify-items:stretch;
   align-items:stretch; */
   /* place-items:stretch; */
}
#coordinate-x {
   grid-area:coordinate-x;
}
#coordinate-y {
   grid-area:coordinate-y;
}
#display {
   grid-area:view;
}
#view [id] {
   position:relative;
   display:flex;
   justify-content:center;
   align-items:center;
}
#view div[id|='coordinate'] {
   background:rgb(250,250,250);
}
#view [id] canvas {
   flex:1 1 auto;
   position:absolute;
   /*
   left:0;
   right:0;
   top:0;
   bottom:0;
   */
}

/* toolbox */

#toolbox-move:checked ~ header label[for='toolbox-move'],
#toolbox-clip:checked ~ header label[for='toolbox-clip'],
#toolbox-draw:checked ~ header label[for='toolbox-draw'],
#toolbox-erase:checked ~ header label[for='toolbox-erase'] {
   background-color:rgb(230,230,230);
}

/* draw */

form[name='draw'] {
   flex:1 1 auto;
   display:flex;
   flex-direction:column;
   justify-content:start;
   align-content:start;
   overflow:auto;
}
form[name='draw'] input[name='select'] ~ fieldset {
   display:none;
}
form[name='draw'] > header {
   display:flex;
   align-items:center;
}
form[name='draw'] input[name='select']:checked ~ fieldset {
   flex:1 1 auto;
   display:grid;
   grid-template-columns:repeat(auto-fit,minmax(calc(18px + 1em),auto));
   grid-gap:0.25em;
   padding:0.5em;
   justify-content:start;
}
form div header {
   display:flex;
   align-items:center;
   justify-content:start;
}
form header span {
   flex:1 1 auto;
   width:10em;
}
form header label {
   flex:0 0 auto;
   padding:0.5em;
}
form header label {
   font-family:'Glyphicons Halflings';
}
input[id*='select'] ~ header label[for*='select']::before {
   content:'\e157';
}
input[id*='select']:checked ~ header label[for*='select']::before {
   content:'\e067';
}
input[id*='visible'] ~ header label[for*='visible']::before {
   content:'\e105';
}
input[id*='visible']:checked ~ header label[for*='visible']::before {
   content:'\e105';
   opacity:0.25;
}
input[id*='editable'] ~ header label[for*='editable']::before {
   content:'\e033';
}
input[id*='editable']:checked ~ header label[for*='editable']::before {
   content:'\e033';
   opacity:0.25;
}
form[name='draw'] div header {
   background:rgb(230,230,230);
}

/* view */

form[name='view'] {
   display:grid;
   grid-template-rows:6em auto;
   grid-template-columns:repeat(2,calc(16px + 1em));
   grid-gap:0.25em;
}
form[name='view'] div.slider {
   grid-row:1;
   grid-column:1;
   display:flex;
   align-items:center;
   justify-content:center;
   border-radius:0.5em;
   background:rgb(250,250,250);
}
form[name='view'] div.slider input[type='range'] {
   width:5em;
   transform:rotate(-90deg);
}
form[name='view'] button[name='snap'] {
   grid-row:2;
   grid-column:1;
}
form[name='view'] button[name='clip'] {
   grid-row:2;
   grid-column:2;
}