src/app/font-picker/font-picker.component.scss
:host {
  display: block;
}

::ng-deep .mat-drawer-backdrop.mat-drawer-shown {
  background-color: rgba(0, 0, 0, 0.2);
}

mat-sidenav-container {
  position: static;
  mat-sidenav {
    position: absolute;
  }
  mat-sidenav {
    min-width: 400px;
    .options {
      padding: 2em;
    }    
    mat-toolbar {
      span {
        padding: .5em;
        font-size: .9em;
        text-decoration: underline;
      }
      .spacer {
        width: 100%;
      }
    }
    mat-form-field {
      display: block;
      label {
        display: inline-block;
      }      
    }
    .font-family {
      display: grid;
      grid-template-columns: 1fr 30px;
      mat-icon {
        cursor: pointer;
      }
    }
  }
}

h2 {
  margin-bottom: 0;
}


.header {
  margin-top: .3em;
  display: grid;
  padding: 0 .5em;
  grid-template-columns: 100px 1fr 70px 100px 40px;
  grid-column-gap: 5px;
  &>* {
    align-self: baseline;
    display: block;
  }
  a {
    cursor: pointer;
  }
}

ul {
  list-style-position: inside;
  list-style-type: none;
  margin: 0;
  padding: 0;

  li {
    font-size: 10pt;
    line-height: 32px;
    vertical-align: middle;
    display: grid;
    grid-template-columns: 100px 1fr 70px 100px 40px;
    grid-column-gap: 5px;
    padding: 0 .5em;

    &:nth-child(odd) {
      background-color: #ddd;
    }
    border: .5px solid #e5e5e5;
    
    border-top: 0px;
    
    &:first-child {
      border-top: .5px solid #e5e5e5;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
    }

    &:last-child {
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
    }

    transition: all .3s ease-in-out;

    &:hover {
      cursor: pointer;
      background: #eee;
    }

    .family {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .name {
      display: block;
    }

    &>span {
      display: block;
    }

    .spacing {
      text-align: right;
    }
  }
}
