.styble-typography {
   &-btn{
      display: flex;
      justify-content: space-between;
      align-items: center;
      button {
         border: 1px solid #DDD;
         border-radius: 2px;
         transition: .3s;
         &:focus:not(:disabled) {
            box-shadow: none;
            outline: none;
         }
      }
   }
   &-btn.active {
      button {
         background-color: #008DB4;
         color: #fff;
         border-color: #008DB4;
      }
   }
   &-btn button:hover{
      border-color: #008DB4;
   }
   &-fonts{
      display: none;
      margin-top: 20px;
      margin-bottom: 20px;
      padding: 20px 15px 10px;
      border-radius: 4px;
      box-shadow: 0px 1.2px 2px -0.2px rgba(0, 0, 0, 0.10), 0px 0.3px 4px -0.5px rgba(0, 0, 0, 0.10);
      #font-picker {
         width: 100%;
         margin-bottom: 15px;
         box-shadow: 0px 0px 3px rgb(0 0 0 / 20%);
      }
      div[id^=font-picker] .dropdown-button,
      div[id^=font-picker] .dropdown-button:hover,
      div[id^=font-picker] ul,
      div[id^=font-picker] .dropdown-button:focus {
         background: #fff;
      }
      div[id^=font-picker] ul li button:hover,
      div[id^=font-picker] ul li button:focus,
      div[id^=font-picker] ul li button.active-font {
         background: #f3f3f3;
      }
   }
   &-fonts.open {
      display: block;
   }
   input[type="text"]:focus{
      box-shadow: none;
      outline: none;
   }
   .css-1u9des2-indicatorSeparator {
      display: none;
   }
}