svg.reading-order .row {
    stroke: red;
    stroke-width: 2px;
    fill: none;
}

svg.reading-order .selected {
    stroke-width: 4px;
    stroke: lightred;
}

.ps-annotation-icon {
    position: absolute;
    left: -26px;
    top: -3px;
    width: 24px;
    height: 24px;
}

.ps-annotation {
    border: 1px solid red;
    border-radius: 3px;
}

.ps-annotation:not(:has(.hover-border.interacted)) .hover-border:hover::before {
    content: "";
    display: block;
    background-color: blue;
    pointer-events: none;
}

.ps-annotation .hover-border {
    position: absolute;
    display: grid;
    align-items: center;
    justify-items: center;
}

.ps-annotation .hover-border.interacted::before {
    content: "";
    display: block;
    background-color: blue;
    pointer-events: none;
}

.ps-annotation .hover-border.horizontal {
    cursor: ns-resize;
    height: 11px;
    width: 100%;
}

.ps-annotation .hover-border.horizontal[side="top"] {
    translate: 0 -5px;
}

.ps-annotation .hover-border.horizontal[side="bottom"] {
    translate: 0 5px;
}

.ps-annotation .hover-border.horizontal::before {
    height: 3px;
    width: 100%;
}

.ps-annotation .hover-border.vertical {
    cursor: ew-resize;
    width: 11px;
    height: 100%;
}

.ps-annotation .hover-border.vertical[side="left"] {
    translate: -5px 0;
}

.ps-annotation .hover-border.vertical[side="right"] {
    translate: 5px 0;
}

.ps-annotation .hover-border.vertical::before {
    width: 3px;
    height: 100%;
}

.ps-annotation.list-item {
    border-color: #005eac;
    color: #005eac;
    background-color: rgba(0, 122, 223, 0.2);
    --annotation-icon: "format_list_bulleted";
}

.ps-annotation.list-item.selected {
    outline: 1px solid #005eac;
    z-index: 100;
}

.ps-annotation.list-item.kind {
    border-style: solid;
}

.ps-annotation.list-item.kind-shared,
.ps-annotation.list-item.kind-auto {
    border-style: dashed;
}

.ps-annotation.text {
    border-color: #000097;
    color: #000097;
    background-color: rgba(0, 0, 202, 0.2);
    --annotation-icon: "subject";
}

.ps-annotation.text.selected {
    outline: 1px solid #000097;
    z-index: 100;
}

.ps-annotation.text.kind {
    border-style: solid;
}

.ps-annotation.text.kind-shared,
.ps-annotation.text.kind-auto {
    border-style: dashed;
}

.ps-annotation.title {
    border-color: #00ffbf;
    color: #00ffbf;
    background-color: rgba(51, 255, 204, 0.2);
    --annotation-icon: "title";
}

.ps-annotation.title.selected {
    outline: 1px solid #00ffbf;
    z-index: 100;
}

.ps-annotation.title.kind {
    border-style: solid;
}

.ps-annotation.title.kind-shared,
.ps-annotation.title.kind-auto {
    border-style: dashed;
}

.ps-annotation.section-header {
    border-color: #df6400;
    color: #df6400;
    background-color: rgba(255, 125, 19, 0.2);
    --annotation-icon: "text_fields";
}

.ps-annotation.section-header.selected {
    outline: 1px solid #df6400;
    z-index: 100;
}

.ps-annotation.section-header.kind {
    border-style: solid;
}

.ps-annotation.section-header.kind-shared,
.ps-annotation.section-header.kind-auto {
    border-style: dashed;
}

.ps-annotation.table {
    border-color: #c0001a;
    color: #c0001a;
    background-color: rgba(243, 0, 33, 0.2);
    --annotation-icon: "table_chart";
}

.ps-annotation.table.selected {
    outline: 1px solid #c0001a;
    z-index: 100;
}

.ps-annotation.table.kind {
    border-style: solid;
}

.ps-annotation.table.kind-shared,
.ps-annotation.table.kind-auto {
    border-style: dashed;
}

.ps-annotation.picture {
    border-color: #ff00c8;
    color: #ff00c8;
    background-color: rgba(255, 51, 211, 0.2);
    --annotation-icon: "insert_photo";
}

.ps-annotation.picture.selected {
    outline: 1px solid #ff00c8;
    z-index: 100;
}

.ps-annotation.picture.kind {
    border-style: solid;
}

.ps-annotation.picture.kind-shared,
.ps-annotation.picture.kind-auto {
    border-style: dashed;
}

.ps-annotation.page-header {
    border-color: lightgreen;
    color: lightgreen;
    background-color: rgba(188, 245, 188, 0.2);
    --annotation-icon: "align_vertical_top";
}

.ps-annotation.page-header.selected {
    outline: 1px solid lightgreen;
    z-index: 100;
}

.ps-annotation.page-header.kind {
    border-style: solid;
}

.ps-annotation.page-header.kind-shared,
.ps-annotation.page-header.kind-auto {
    border-style: dashed;
}

.ps-annotation.page-footer {
    border-color: darkgreen;
    color: darkgreen;
    background-color: rgba(0, 151, 0, 0.2);
    --annotation-icon: "align_vertical_bottom";
}

.ps-annotation.page-footer.selected {
    outline: 1px solid darkgreen;
    z-index: 100;
}

.ps-annotation.page-footer.kind {
    border-style: solid;
}

.ps-annotation.page-footer.kind-shared,
.ps-annotation.page-footer.kind-auto {
    border-style: dashed;
}

.ps-annotation.formula {
    border-color: #8d3351;
    color: #8d3351;
    background-color: rgba(178, 65, 103, 0.2);
    --annotation-icon: "functions";
}

.ps-annotation.formula.selected {
    outline: 1px solid #8d3351;
    z-index: 100;
}

.ps-annotation.formula.kind {
    border-style: solid;
}

.ps-annotation.formula.kind-shared,
.ps-annotation.formula.kind-auto {
    border-style: dashed;
}

.ps-annotation.caption {
    border-color: #8c9e27;
    color: #8c9e27;
    background-color: rgba(176, 199, 49, 0.2);
    --annotation-icon: "subtitles";
}

.ps-annotation.caption.selected {
    outline: 1px solid #8c9e27;
    z-index: 100;
}

.ps-annotation.caption.kind {
    border-style: solid;
}

.ps-annotation.caption.kind-shared,
.ps-annotation.caption.kind-auto {
    border-style: dashed;
}

.ps-annotation.footnote {
    border-color: #470539;
    color: #470539;
    background-color: rgba(119, 8, 95, 0.2);
    --annotation-icon: "looks_one";
}

.ps-annotation.footnote.selected {
    outline: 1px solid #470539;
    z-index: 100;
}

.ps-annotation.footnote.kind {
    border-style: solid;
}

.ps-annotation.footnote.kind-shared,
.ps-annotation.footnote.kind-auto {
    border-style: dashed;
}

.segment-option {
    gap: 0.5em;
}