@use "sass:map";
/*$blue_60;*/
/*$blue_50;*/
#font_picker {
  position: relative;
  cursor: pointer; }
  #font_picker .list {
    position: absolute;
    display: none;
    flex-direction: column;
    top: 100%;
    left: 0;
    border: 1px solid #99B;
    background-color: #FFF;
    white-space: nowrap;
    max-height: 300px;
    overflow: auto; }
    #font_picker .list .item {
      display: flex;
      flex-direction: row;
      padding: .3em .6em; }
      #font_picker .list .item:hover {
        background-color: #EEE; }
    #font_picker .list .name {
      flex-grow: 1; }
    #font_picker .list .letterform {
      padding-left: 1em;
      color: #999; }
    #font_picker .list .active, #font_picker .list .active:hover {
      background-color: #3582c4; }
      #font_picker .list .active, #font_picker .list .active .letterform, #font_picker .list .active:hover, #font_picker .list .active:hover .letterform {
        color: #FFF; }
  #font_picker.active {
    background-color: #3582c4; }
    #font_picker.active .symbol-font {
      color: #FFF; }
    #font_picker.active .list {
      display: flex; }