.original-tool
{
 font-size:var(--font-size-text);
 margin:0.5em;
 padding:0
}

#tab-content-settings
{
 align-items:center;
 grid-template-columns:min-content 1fr;
 grid-template-rows:repeat(27, min-content);
 grid-template-areas:"zoom-title zoom-title"
                     "magnify-label magnify"
                     "scale-label scale"
                     "shape-title shape-title"
                     "shape-convex-label shape-convex"
                     "shape-color-label shape-color"
                     "shape-opacity-label shape-opacity"
                     "intersection-title intersection-title"
                     "intersection-color-label intersection-color"
                     "intersection-opacity-label intersection-opacity"
                     "point-title point-title"
                     "point-shape-title point-shape-title"
                     "point-color-label point-color"
                     "point-opacity-label point-opacity"
                     "point-ignored-title point-ignored-title"
                     "point-ignored-color-label point-ignored-color"
                     "point-ignored-opacity-label point-ignored-opacity"
                     "point-hovered-title point-hovered-title"
                     "point-hovered-color-label point-hovered-color"
                     "point-hovered-opacity-label point-hovered-opacity"
                     "point-selected-title point-selected-title"
                     "point-selected-color-label point-selected-color"
                     "point-selected-opacity-label point-selected-opacity"
                     "offset-title offset-title"
                     "offset-mode-label offset-mode"
                     "offset-x-label offset-x"
                     "offset-y-label offset-y"
}

.offset-title { grid-area:offset-title }
.offset-mode-label { grid-area:offset-mode-label }
.offset-mode { grid-area:offset-mode }
.offset-x-label { grid-area:offset-x-label }
.offset-x { grid-area:offset-x }
.offset-y-label { grid-area:offset-y-label }
.offset-y { grid-area:offset-y }
.zoom-title { grid-area:zoom-title }
.scale-label { grid-area:scale-label }
.scale { grid-area:scale }
.magnify-label { grid-area:magnify-label }
.magnify { grid-area:magnify }
.shape-title { grid-area:shape-title }
.shape-color-label { grid-area:shape-color-label }
.shape-color { grid-area:shape-color }
.shape-opacity-label { grid-area:shape-opacity-label }
.shape-opacity { grid-area:shape-opacity }
.shape-convex-label { grid-area:shape-convex-label }
.shape-convex { grid-area:shape-convex }
.point-title { grid-area:point-title }
.point-shape-title { grid-area:point-shape-title }
.point-color-label { grid-area:point-color-label }
.point-color { grid-area:point-color }
.point-opacity-label { grid-area:point-opacity-label }
.point-opacity { grid-area:point-opacity }
.point-hovered-title { grid-area:point-hovered-title }
.point-hovered-color-label { grid-area:point-hovered-color-label }
.point-hovered-color { grid-area:point-hovered-color }
.point-hovered-opacity-label { grid-area:point-hovered-opacity-label }
.point-hovered-opacity { grid-area:point-hovered-opacity }
.point-ignored-title { grid-area:point-ignored-title }
.point-ignored-color-label { grid-area:point-ignored-color-label }
.point-ignored-color { grid-area:point-ignored-color }
.point-ignored-opacity-label { grid-area:point-ignored-opacity-label }
.point-ignored-opacity { grid-area:point-ignored-opacity }
.point-selected-title { grid-area:point-selected-title }
.point-selected-color-label { grid-area:point-selected-color-label }
.point-selected-color { grid-area:point-selected-color }
.point-selected-opacity-label { grid-area:point-selected-opacity-label }
.point-selected-opacity { grid-area:point-selected-opacity }
.intersection-title { grid-area:intersection-title }
.intersection-color-label { grid-area:intersection-color-label }
.intersection-color { grid-area:intersection-color }
.intersection-opacity-label { grid-area:intersection-opacity-label }
.intersection-opacity { grid-area:intersection-opacity }

#setting-offset-x,
#setting-offset-y
{
 max-width:2rem
}

@media (min-width:40rem)
{
 #tab-content-settings
 {
  gap: 0 1rem;
  grid-template-columns:min-content min-content min-content min-content min-content 1fr;
  grid-template-rows:repeat(12, min-content);
  grid-template-areas:"zoom-title zoom-title zoom-title zoom-title zoom-title zoom-title"
                      "magnify-label magnify scale-label scale scale scale"
                      "shape-title shape-title shape-title shape-title shape-title shape-title"
                      "shape-convex-label shape-convex shape-color-label shape-color shape-opacity-label shape-opacity"
                      "intersection-title intersection-title intersection-color-label intersection-color intersection-opacity-label intersection-opacity"
                      "point-title point-title point-title point-title point-title point-title"
                      "point-shape-title point-shape-title point-color-label point-color point-opacity-label point-opacity"
                      "point-ignored-title point-ignored-title point-ignored-color-label point-ignored-color point-ignored-opacity-label point-ignored-opacity"
                      "point-hovered-title point-hovered-title point-hovered-color-label point-hovered-color point-hovered-opacity-label point-hovered-opacity"
                      "point-selected-title point-selected-title point-selected-color-label point-selected-color point-selected-opacity-label point-selected-opacity"
                      "offset-title offset-title offset-title offset-title offset-title offset-title"
                      "offset-mode-label offset-mode offset-x-label offset-x offset-y-label offset-y"
 }

 .settings > h2
 {
  margin:0
 }
}

#tab-content-path
{
 display: flex;
 flex-direction: column;
 flex-wrap: nowrap;
 justify-content: flex-start;
 align-content: stretch;
 align-items: flex-start
}

#tab-content-path > *
{
 margin:0.25em 0
}

#tab-content-path > small
{
 padding:0;
 font-size:var(--font-size-small-text);
 line-height:var(--line-height-small-text);
 flex:0 1 auto;
 align-self:stretch
}

#tab-content-path > canvas
{
 padding:0;
 flex: 1 1 auto;
 cursor:crosshair;
 outline:1px solid var(--grey6)
}

#tab-content-path > div.warnings
{
 flex:0 1 auto
}

.dynamic-coordinate
{
 min-width:2rem;
 display:inline-block
}

/* TODO : use VLButton.VLButton-link.VLButton-destructive */
a.link-destructive
{
 color:var(--link-destructive)
}

a.link-destructive:hover
{
 color:var(--link-destructive-hover)
}

#tab-content-output > textarea
{
 font-family:monospace;
 font-size:var(--font-size-text);
 line-height:var(--line-height-text);
 white-space:pre;
 overflow:auto;
 padding:0;
 margin:0 0.5em;
 width:calc(100% - 1em);
 min-height:250px;
 border:0;
 outline:0
}