style.css

.PromotePinned svg {
	stroke-width: 2px;
}

.Theme__Dark .PromotePinned:hover svg {
	stroke: #fff !important;
}

.PromotePinned strong {
	font-weight: 700;
	color: #C7C4C4;
	margin: 0 0 0 5px;
}

.Theme__Dark .PromotePinned strong {
	color: #434344;
}

.Theme__Light .PromotePinned:hover strong {
	color: #9f9c9c;
}

.Theme__Dark .PromotePinned:hover strong {
	color: #fff;
}

.PromotePinned.--Enabled strong {
	color: #F0CE15;
}

.PromotePinned.--Enabled svg {
	stroke: #F0CE15 !important;
}

.Note {
	position: relative;
}

.NoteButtons {
	transition: opacity .1s ease;
	position: absolute;
	top: 20px;
	right: 0;
	pointer-events: none;
	opacity: 0;
}

.__Pinned .NoteButtons {
	pointer-events: auto;
	opacity: 1;
	right: 20px;
}

.__Pinned .NoteButtons .Trash {
	display: none;
}

.Note:hover .NoteButtons {
	opacity: 1;
	pointer-events: auto;
}

.Note:hover .NoteButtons,
.Note:hover .NoteButtons * {
	cursor: pointer;
}

.NoteButtons span {
	margin-left: 11px;
}

.NoteButtons .Trash svg {
	width: 15px;
	height: 16px;
	fill: #EF4E65;
}

.NoteButtons .Trash:hover svg {
	fill: #ba3e51;
}

.NoteButtons .Pin svg {
	width: 16px;
	height: 16px;
	stroke: #C7C4C4;
	fill: none;
	stroke-width: 2px;
}

.NoteButtons .Pin:hover svg {
	stroke: #9f9c9c;
}

.__Pinned .NoteButtons .Pin svg {
	stroke: #F0CE15;
}

.NoteButtons .Edit svg {
	width: 16px;
	height: 16px;
	color: #f9a57e;
}
.NoteButtons .Edit svg use {
	color: currentColor;
}
.NoteButtons .Edit:hover svg {
	color: #c38263;
}