:root, [data-bs-theme=light] {
    /* Main textbox area */
    .note-editing-area {
        color: var(--ctp-latte-text);
    }
    /* Toolbar with btns */
    .note-toolbar {
        background-color: var(--ctp-latte-crust);
    }
    /* Actual toolbar btns */
    .note-btn {
        background-color: var(--ctp-latte-text);
        color: var(--ctp-latte-base);
        border-color: var(--ctp-latte-text);
    }

        .note-btn:hover {
            background-color: #3C3D53;
            border-color: #38394D;
        }
}

[data-bs-theme=dark] {
    /* Main textbox area */
    .note-editing-area {
        color: var(--ctp-macchiato-text);
    }
    /* Toolbar with btns */
    .note-toolbar {
        background-color: var(--ctp-macchiato-crust);
    }
    /* Actual toolbar btns */
    .note-btn {
        background-color: var(--ctp-macchiato-surface1);
        color: var(--ctp-macchiato-text);
        border-color: var(--ctp-macchiato-surface1);
    }

        .note-btn:hover {
            background-color: #383B4D;
            border-color: #333647;
        }
}

/* 
     This class creates a 3-part grid, allowing a centered 
     header with a right-aligned button section.
     Used for the headers over the text content sections.
*/
.summernote-header-row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}

/*
	Added this to force the accessibility icon back to its
	default white color. For some reason it was coming out black
	and I'm not sure why.
*/

.note-icon svg {
	fill: currentColor;
}