styles.css

.web-highlighter-highlight {
    background-color: transparent;
    border-bottom: 2px solid #ffeb3b;
    border-radius: 0;
    white-space: pre-wrap;
    text-decoration: none;
    display: inline;
}

.web-highlighter-highlight:hover {
    border-bottom-color: #fdd835;
    cursor: pointer;
}

/* Add styles for heading highlights */
h1 .web-highlighter-highlight,
h2 .web-highlighter-highlight,
h3 .web-highlighter-highlight,
h4 .web-highlighter-highlight,
h5 .web-highlighter-highlight,
h6 .web-highlighter-highlight {
    border-bottom: 3px solid #ffeb3b;
    padding: 2px 0;
}

/* Add styles for paragraph highlights */
p .web-highlighter-highlight {
    border-bottom: 2px solid #ffeb3b;
    padding: 1px 0;
}

/* Connected highlights within the same block */
.web-highlighter-highlight + .web-highlighter-highlight {
    margin-left: 0;
    padding-left: 0;
}

/* Ensure proper spacing around underlines */
.web-highlighter-highlight {
    padding-bottom: 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Editing styles for highlights */
.web-highlighter-highlight.editing {
    background-color: rgba(255, 235, 59, 0.2);
    border-bottom-style: dashed;
}