.ShadowControl { display: grid; grid-template-columns: 10em 1fr 1fr; grid-template-rows: 1fr; grid-template-areas: "selector preview tweak"; grid-gap: 0.5em; justify-content: stretch; margin-bottom: 1em; width: 100%; &.-compact { grid-template-columns: 1fr; grid-template-rows: 10em auto auto; grid-template-areas: "selector" "preview" "tweak"; &.-no-preview { grid-template-columns: 1fr; grid-template-rows: 10em 1fr; grid-template-areas: "selector" "tweak"; } } .shadow-switcher { grid-area: selector; order: 1; flex: 1 0 6em; min-width: 6em; margin-right: 0.125em; display: flex; flex-direction: column; .shadow-list { flex: 1 0 auto; } } .shadow-tweak { grid-area: tweak; order: 3; flex: 2 0 10em; min-width: 10em; margin-left: 0.125em; margin-right: 0.125em; display: grid; grid-template-rows: auto 1fr; grid-gap: 0.25em; /* hack */ .input-boolean { flex: 1; display: flex; .label { flex: 1; } } .input-string { flex: 1 0 5em; } .shadow-expression { width: 100%; height: 100%; } .id-control { align-items: stretch; .shadow-switcher, .btn { min-width: 1px; margin-right: 5px; } .btn { padding: 0 0.4em; margin: 0 0.1em; } } } &.-no-preview { grid-template-columns: 10em 1fr; grid-template-rows: 1fr; grid-template-areas: "selector tweak"; .shadow-tweak { order: 0; flex: 2 0 8em; max-width: 100%; } .input-range { min-width: 5em; } } .inset-alert { padding: 0.25em 0.5em; } &.disabled { .inset-alert { opacity: 0.2; } } .shadow-preview { grid-area: preview; min-width: 10em; margin-left: 0.125em; align-self: start; } } .inset-tooltip { max-width: 30em; }