src/app/theme-builder/theme-builder.component.scss
:host {
  width: 100vw;
  height: 100vh;
}

mat-toolbar {
  grid-area: title;
  img {
    filter: drop-shadow(0px 0px 3px #222);
    margin-right: 10px;
  }

  app-lightness-picker {
    line-height: 1rem;
    margin-left: 1em;
  }

  .spacer {
    width: 100%;
  }

  .button-group {
    line-height: 0px;

    button {
      margin-left: 1em;
    }
  }

  .view, .export, .version {
    margin-left: 1em;
    font-size: 1rem;
    display: inline-block;
    line-height: 1rem;

    mat-button-toggle-group {
      margin-left: .25rem;
       
      mat-button-toggle ::ng-deep .mat-button-toggle-label-content {
        line-height: 2em;
      }
    
      mat-button-toggle.mat-button-toggle-checked {
        border-bottom: 2px solid hotpink;
      }
    }
  }
}

.inner {
  display: grid;
  position: relative;
  grid-template-areas:
    "title title"
    "tools preview";

  grid-template-rows: 64px 1fr;
  grid-template-columns: 500px 1fr;


  .tools {
    grid-area: tools;
    height: calc(100vh - 64px);
    width: 100%;
    overflow-y: auto;
    padding: 10px;
    box-sizing: border-box;
  }

  .preview {
    grid-area: preview;
    box-shadow: 0px 0px 40px rgba(0,0,0,.5);
    border: none;
    opacity: 0;

    &.loading {
      box-shadow: none;
      text-align: center;
      line-height: calc(100vh - 64px);      
      
      .wrapper {  
        position: absolute;
        top: calc(50vh);
        left: calc(50vw + 200px);
        transform: scale(3);
      }
    }

    &,
    iframe,
    pre {
      width: calc(100vw - 500px - 40px);
      height: calc(100vh - 64px - 40px);
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }

    & {
      margin: 20px;
    }

    &.ready {
      opacity: 1;
    }

    iframe {
      border: none;
      overflow-y: auto;
    }

    pre {
      padding: 1em;
      overflow-y: auto;

      code {
        font-size: 10pt;
      }
    }
  }
}

::ng-deep a.help {
  margin-right: .5em;  
  color: inherit;
  text-decoration: none;
  .mat-badge-content {
    font-size: 8pt;
    opacity: .3;
    color: black;
    font-weight: bold;
  }
}

.theme-alternate ::ng-deep a.help {
  .mat-badge-content {
    opacity: .8;
    color: white;
  }  
}