.sticky-note {
    color: rgb(28, 28, 28);
    text-align: left;
    position: absolute;
    display: none;
    transform: translate(-50% , -50%) !important;
    padding: 10px;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.33);
    transform: rotate(var(--rotation));
    container-type: size;
    container-name: sticky-note;
    cursor: grab;
    background-color: var(--normal-note-background);
}

.details-view .sticky-note {
    display: block;
}

.note-text {
    display: block;
    position: absolute;
    top: 5px;
    left: 5px;
    min-width: calc(100% - 12px);
    min-height: calc(50%);
    width: max-content;
    height: max-content;
    max-width: calc(100% - 12px);
    max-height: calc(100% - 12px);
    overflow: hidden;
    font-size: clamp(6px, 13cqh, 28px);
    outline: none;
    cursor: text;
    text-align: left;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

.note-text.empty:before {
    content: attr(data-placeholder);
    color: #999;
    font-style: italic;
    pointer-events: none;
    display: block; 
    position: absolute;
}

.sticky-note .char-counter {
    position: absolute;
    bottom: 4cqw;
    right: 15cqw;
    user-select: none;
    font-size: clamp(8px, 1.3vmin - 1.5px, 28px) !important;
    color: #969595;
    display: none;
}

.note-menu {
    width: 20cqw;
    height: 40cqw;
    position: absolute;
    bottom: -8cqw;
    right: -3cqw;
    background-image: url('./icons/three-dots-icon1.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}

.sticky-note.flagged {
    transform: rotate(-30deg) translate(-40%, -60%) !important;
    background-color: var(--flagged-note-background);
}

.sticky-note.todo {
    border-top: 2px dashed var(--note-state-border-color);
}

.sticky-note.inprogress {
    border-top: 2px solid var(--note-state-border-color);
}

.sticky-note.done {
    border-top: 6px double var(--note-state-border-color);
}

.sticky-note.trash {
    display: none;
}

.sticky-note.selected {
    border-bottom: 2px solid var(--note-select-border-color);
    border-left: 2px solid var(--note-select-border-color);
    border-right: 2px solid var(--note-select-border-color);
    border-top-color: var(--note-select-border-color) !important;
}

.sticky-note.hidden {
    display: none;
}