.clip{
--sb:rgba(240,85,51,0.72);
--sbh:rgba(240,85,51,0.72);
--sbs:rgba(255,87,34,0.92);
--sbo:rgba(255,87,34,0.22);
--sboh:rgba(255,87,34,0.3);
}
.clip.pinned{
--sb:rgba(255,165,0,0.72);
--sbh:rgba(255,165,0,0.72);
--sbs:rgba(255,165,0,0.92);
--sbo:rgba(255,165,0,0.22);
--sboh:rgba(255,165,0,0.3);
}
.clip.clip-link,
.clip.clip-link.pinned{
--sb:rgba(80,150,255,0.72);
--sbh:rgba(80,150,255,0.72);
--sbs:rgba(80,150,255,0.92);
--sbo:rgba(80,150,255,0.22);
--sboh:rgba(80,150,255,0.3);
}
.clip .move-handle,
.clip .note-content,
.clip .note-link-wrapper{
transition:filter 100ms ease;
position:relative;
}
.clip .move-handle::before,
.clip .note-content::before,
.clip .note-link-wrapper::before{
content:'';
position:absolute;
inset:0;
border-radius:var(--br1);
box-shadow:inset 0 0 0 2px var(--sb);
opacity:0;
transition:opacity 100ms ease,box-shadow 100ms ease;
pointer-events:none;
z-index:5;
}
.clip:hover .move-handle::before,
.clip:hover .note-content::before,
.clip:hover .note-link-wrapper::before{
opacity:1;
box-shadow:inset 0 0 0 2px var(--sbh);
}
.clip.sortable-chosen:not(.dragging):not(.drag-ready) .move-handle::before,
.clip.sortable-chosen:not(.dragging):not(.drag-ready) .note-content::before,
.clip.sortable-chosen:not(.dragging):not(.drag-ready) .note-link-wrapper::before{
opacity:1;
box-shadow:inset 0 0 0 2px var(--sbs);
}
.sel-mode .clip.sel .move-handle,
.sel-mode .clip.sel .note-content,
.sel-mode .clip.sel .note-link-wrapper{
position:relative;
}
.sel-mode .clip.sel .move-handle::before,
.sel-mode .clip.sel .note-content::before,
.sel-mode .clip.sel .note-link-wrapper::before{
opacity:1;
box-shadow:inset 0 0 0 2px var(--sbs);
}
.sel-mode .clip.sel .move-handle::after,
.sel-mode .clip.sel .note-content::after,
.sel-mode .clip.sel .note-link-wrapper::after{
content:'';
position:absolute;
inset:0;
background:var(--sbo);
pointer-events:none;
z-index:1;
border-radius:var(--br1);
transition:background 100ms ease;
}
.sel-mode .clip.sel:hover .move-handle::after,
.sel-mode .clip.sel:hover .note-content::after,
.sel-mode .clip.sel:hover .note-link-wrapper::after{
background:var(--sboh);
}