/**
 * The following styles get applied inside the editor only.
 *
 * Replace them with your own styles or remove the file completely.
 */

.hover-highlights2-editor{
  display:flex;
  align-items:center;
  gap:40px;


  .left{
    display:flex;
    flex-direction: column;
    width: 30%;
    gap:20px;

    .item-data{
      .header{
        display:flex;
        align-items: center;
        gap:20px;

        h2{
          margin:0;
        }

        .hover-highlight-arrow{
          flex-shrink:0;
          width:20px;
          height:auto;

          svg{
            display:block;
            width:100%;
            height:auto;
          }
        }
      }

      h3{
        margin-top:15px;
      }
    }
  }

  .right{
    width:70%;

    .block-list-appender{
      width:100%;
      padding:0;
      position:relative;

      .custom-appender-wrapper{
        width:100%;
        line-height:normal;
        padding:20px;
        background:transparent;
        cursor:pointer;
        border-radius:4px;
        text-align:center;
        box-sizing: border-box;

        .custom-block-appender{
          position: relative;
          background: white!important;
          color: #1d2327!important;
          border: 1px solid black!important;
          padding: 8px 16px;
          box-shadow: none;
          display: flex;
          align-items: center;
          gap: 8px;
          justify-content: center;
          font-size: 13px;

          &:hover {
            color: #007cba!important;
            border-color: #007cba!important;

            svg{
              path{
                fill: #007cba!important;
              }
            }
          }

          &:focus {
            box-shadow: 0 0 0 1px #1d2327, 0 0 0 3px #f3f4f6;
            outline: none;
          }

          svg{
            display: block;
            width: 20px;
            height: auto;
          }
        }
      }
    }
  }


}