#tab-content-settings
{
 align-items:center;
 grid-template-columns:min-content 1fr;
 grid-template-rows:repeat(19, min-content);
 grid-template-areas:"dimensions-title dimensions-title"
                     "size-type-label size-type"
                     "size-label-A size-A"
                     "size-label-B size-B"
                     "slices-title slices-title"
                     "edge-title edge-title"
                     "edge-color-label edge-color"
                     "edge-opacity-label edge-opacity"
                     "edge-width-label edge-width"
                     "disabled-title disabled-title"
                     "disabled-color-label disabled-color"
                     "disabled-opacity-label disabled-opacity"
                     "disabled-width-label disabled-width"
                     "hover-title hover-title"
                     "hover-color-label hover-color"
                     "hover-opacity-label hover-opacity"
                     "selection-title selection-title"
                     "selection-color-label selection-color"
                     "selection-opacity-label selection-opacity"
}

#tab-content-settings input[type=text]
{
 max-width:2rem
}

.dimensions-title { grid-area:dimensions-title }
.size-type-label { grid-area:size-type-label }
.size-type { grid-area:size-type }
.size-width-label { grid-area:size-label-A }
.size-width { grid-area:size-A }
.size-height-label { grid-area:size-label-B }
.size-height { grid-area:size-B }
.size-column-label { grid-area:size-label-A }
.size-column { grid-area:size-A }
.size-row-label { grid-area:size-label-B }
.size-row { grid-area:size-B }
.slices-title { grid-area:slices-title }
.edge-title { grid-area:edge-title }
.edge-color-label { grid-area:edge-color-label }
.edge-color { grid-area:edge-color }
.edge-opacity-label { grid-area:edge-opacity-label }
.edge-opacity { grid-area:edge-opacity }
.edge-width-label { grid-area:edge-width-label }
.edge-width { grid-area:edge-width }
.disabled-title { grid-area:disabled-title }
.disabled-color-label { grid-area:disabled-color-label }
.disabled-color { grid-area:disabled-color }
.disabled-opacity-label { grid-area:disabled-opacity-label }
.disabled-opacity { grid-area:disabled-opacity }
.disabled-width-label { grid-area:disabled-width-label }
.disabled-width { grid-area:disabled-width }
.hover-title { grid-area:hover-title }
.hover-color-label { grid-area:hover-color-label }
.hover-color { grid-area:hover-color }
.hover-opacity-label { grid-area:hover-opacity-label }
.hover-opacity { grid-area:hover-opacity }
.selection-title { grid-area:selection-title }
.selection-color-label { grid-area:selection-color-label }
.selection-color { grid-area:selection-color }
.selection-opacity-label { grid-area:selection-opacity-label }
.selection-opacity { grid-area:selection-opacity }

@media (min-width:40rem)
{
 #tab-content-settings
 {
  gap: 0 1rem;
  grid-template-columns:min-content min-content min-content min-content min-content min-content 1fr;
  grid-template-rows:repeat(13, min-content);
  grid-template-areas:"dimensions-title dimensions-title dimensions-title dimensions-title dimensions-title dimensions-title dimensions-title"
                      "size-type-label size-type size-type size-type size-type size-type size-type"
                      "size-label-A size-A size-label-B size-B size-B size-B size-B"
                      "slices-title slices-title slices-title slices-title slices-title slices-title slices-title"
                      "edge-title edge-color-label edge-color edge-opacity-label edge-opacity edge-width-label edge-width"
                      "hover-title hover-color-label hover-color hover-opacity-label hover-opacity hover-opacity hover-opacity"
                      "disabled-title disabled-color-label disabled-color disabled-opacity-label disabled-opacity disabled-width-label disabled-width"
                      "selection-title selection-title selection-title selection-title selection-title selection-title selection-title"
                      "selection-color-label selection-color selection-opacity-label selection-opacity selection-opacity selection-opacity selection-opacity"
 }

 .settings>h2
 {
  margin:0
 }
}

.input-size
{
 display:grid;
 grid-template-columns:min-content min-content min-content min-content 1fr;
 grid-template-rows:min-content;
 gap:0;
 grid-template-areas:". . . . .";
 align-items:center
}

.input-size > *
{
 margin:0.25em
}

.input-size > input
{
 max-width:2rem
}

label[for=output-synced]
{
 display:block
}

.output-size
{
 display:flex;
 gap:0.5em;
 margin:0.5em 0
}

#output-align>h2
{
 padding:0;
 margin:0;
 line-height:1;
 font-size:1rem;
 font-weight:normal
}

.output-align-grid
{
 width:min-content;
 display:grid;
 gap:0;
 grid-template-columns:1fr 1fr 1fr;
 grid-template-rows:1fr 1fr 1fr;
 grid-template-areas:". . ." ". . ." ". . .";
 align-items:center;
 justify-items:center
}

#output-unsynced input[type=text]
{
 max-width:2rem
}

#slices
{
 display:flex;
 flex-direction:row;
 flex-wrap:wrap
}

#slices > div
{
 flex:1 1 auto;
 margin:5px; padding:4px;
 overflow:hidden;
 text-align:center;
 background-color:var(--grey3);
 border-radius:var(--UI-small-border-radius);
 display:grid;
 grid-template-columns:min-content 1fr;
 grid-template-rows:min-content 1fr;
 gap:0.25em;
 grid-template-areas:"output-checkbox output-name"
                     "output-canvas output-canvas";
 align-items:center
}

#slices > div.slice-disabled
{
 /* TODO : isn't it better to use : background-color:hsl(var(--red1-hsl) / 0.5); ? */
 background-color:var(--red1);
 opacity:0.5
}

#slices input[type=checkbox]
{
 margin:0;
 grid-area:output-checkbox
}

#slices input[type=text]
{
 display:block;
 text-align:center;
 margin:0;
 padding:0;
 border:0;
 width:100%;
 grid-area:output-name
}

#slices canvas
{
 margin:0.25em auto;
 outline:1px dashed var(--grey6);
 grid-area:output-canvas
}