@charset "UTF-8";

/* 
 * Toretame Highlighter Use Generic Classes + CSS Variables
 * .tt-mark, .tt-bg, .tt-ul are generic classes.
 * Specific color is provided via --ttc variable in inline style.
 * 
 * Example: <span class="tt-mark" style="--ttc: var(--tt-yellow);">Text</span>
 */

/* --------------------------------------------------
   Generic Styles
-------------------------------------------------- */

/* Mark: Marker Style (Bottom 40-50%) */
.tt-mark {
    background: linear-gradient(transparent 60%, var(--ttc, transparent) 0);
    padding-bottom: 2px;
    /* 少し余白 */
}

/* Background: Full Background */
.tt-bg {
    background-color: var(--ttc, transparent);
    /* 視認性確保のため、文字色は黒を基本とするが、
       濃い背景色が設定された場合は考慮が必要。
       今回は「薄い色」推奨なので継承または黒。 */
    color: inherit;
}

/* Underline: Text Decoration */
.tt-ul {
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-color: var(--ttc, currentColor);
    text-decoration-thickness: 3px;
    text-underline-offset: 3px;
    text-decoration-skip-ink: none;
    /* 線を途切れさせない */
}


/* --------------------------------------------------
   Editor Toolbar Styling
-------------------------------------------------- */
/* 
   Dynamic classes generated in script.js: .tt-btn-{style}-{colorSlug}
   We can allow basic styling here if needed, but the JS uses `icon: 'edit'` generic.
   To make toolbars colorful, we need to target them dynamically or rely on Dashicon generic.
   
   However, since we are using generic registerFormatType now,
   we can try to accept that toolbar icons are generic 'edit' icons, 
   OR we can generate huge CSS for every possible color if we really want specific icons?
   
   Actually, the PHP injects CSS variables like --tt-yellow.
   We can use those variables for the generic button IF we could pass style to it.
   But RichTextToolbarButton doesn't easily accept dynamic style for the icon itself via class.
   
   Let's keep it simple: formatting is applied on click.
   The user can see the formatted text.
*/

/* --------------------------------------------------
   Sidebar Grid Styling
-------------------------------------------------- */
.th-sidebar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}