/* Custom Theme Variables */
:root {
    /* Colors from the project */
    --primary-color: #3498db;
    --text-color: #4a5568;
    --heading-color: #2c3e50;
    --border-color: #e2e8f0;
    --background-light: #f9f9f9;
    --background-white: #fff;
    
    /* Font stack from the project */
    --system-fonts: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --serif-fonts: 'Libre Baskerville', Georgia, serif;
}

/* Custom Toolbar Theme */
.floating-toolbar.theme-custom {
    /* Main toolbar variables */
    --toolbar-bg: var(--background-white);
    --toolbar-text: var(--text-color);
    --toolbar-border: var(--border-color);
    --toolbar-hover: var(--background-light);
    --toolbar-active: var(--primary-color);
    --toolbar-active-text: var(--background-white);
    --toolbar-input-bg: var(--background-light);
    --toolbar-input-border: var(--border-color);
    --toolbar-input-focus: var(--primary-color);
    --toolbar-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    
    /* Apply the styles */
    background: var(--toolbar-bg);
    border: 1px solid var(--toolbar-border);
    box-shadow: var(--toolbar-shadow);
    font-family: var(--serif-fonts);
}

/* Button styles */
.floating-toolbar.theme-custom button {
    color: var(--toolbar-text);
    font-family: inherit;
    transition: all 0.2s ease;
    min-width: 32px;
    height: 32px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icon styling for custom theme */
.floating-toolbar.theme-custom .material-icons {
    font-family: inherit;
    font-style: normal;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    position: relative;
    overflow: hidden;
}

/* Hide the original text content */
.floating-toolbar.theme-custom .material-icons span,
.floating-toolbar.theme-custom .material-icons {
    font-size: 0 !important;
    visibility: hidden;
}

/* Replace icons with text using ::before */
.floating-toolbar.theme-custom .material-icons::before {
    visibility: visible;
    font-size: 14px;
    color: var(--toolbar-text);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
}

/* Replace specific icons with text */
.floating-toolbar.theme-custom .material-icons[data-icon="format_bold"]::before { content: 'B'; }
.floating-toolbar.theme-custom .material-icons[data-icon="format_italic"]::before { content: 'I'; }
.floating-toolbar.theme-custom .material-icons[data-icon="format_underline"]::before { content: 'U'; }
.floating-toolbar.theme-custom .material-icons[data-icon="format_strikethrough"]::before { content: 'S'; }
.floating-toolbar.theme-custom .material-icons[data-icon="looks_one"]::before { content: 'H₁'; }
.floating-toolbar.theme-custom .material-icons[data-icon="looks_two"]::before { content: 'H₂'; }
.floating-toolbar.theme-custom .material-icons[data-icon="code"]::before { content: '{ }'; }
.floating-toolbar.theme-custom .material-icons[data-icon="format_quote"]::before { content: '"'; }
.floating-toolbar.theme-custom .material-icons[data-icon="format_list_bulleted"]::before { content: '•'; }
.floating-toolbar.theme-custom .material-icons[data-icon="format_list_numbered"]::before { content: '№'; }
.floating-toolbar.theme-custom .material-icons[data-icon="link"]::before { content: '⌘'; }
.floating-toolbar.theme-custom .material-icons[data-icon="open_in_new"]::before { content: '↗'; }
.floating-toolbar.theme-custom .material-icons[data-icon="delete"]::before { content: '×'; }
.floating-toolbar.theme-custom .material-icons[data-icon="check"]::before { content: '✓'; }
.floating-toolbar.theme-custom .material-icons[data-icon="close"]::before { content: '×'; }

.floating-toolbar.theme-custom button:hover {
    background: var(--toolbar-hover);
    color: var(--heading-color);
}

.floating-toolbar.theme-custom button.active {
    background: var(--toolbar-active);
    color: var(--toolbar-active-text);
}

/* Group separator */
.floating-toolbar.theme-custom .toolbar-group {
    border-right: 1px solid var(--toolbar-border);
    padding-right: 4px;
    margin-right: 4px;
}

.floating-toolbar.theme-custom .toolbar-group:last-child {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
}

/* Link input styles */
.floating-toolbar.theme-custom .toolbar-link-input {
    display: none; /* Hidden by default */
    align-items: center;
    gap: 4px;
    padding: 4px;
}

.floating-toolbar.theme-custom .toolbar-link-input.active {
    display: flex; /* Show when active */
}

.floating-toolbar.theme-custom .link-input {
    background: var(--toolbar-input-bg);
    border: 1px solid var(--toolbar-input-border);
    color: var(--text-color);
    font-family: inherit;
    padding: 4px 8px;
    min-width: 200px;
    border-radius: 4px;
}

.floating-toolbar.theme-custom .link-input:focus {
    border-color: var(--toolbar-input-focus);
    outline: none;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

/* Make sure the link input buttons use our custom icons */
.floating-toolbar.theme-custom .toolbar-link-input .material-icons {
    font-family: inherit;
    font-style: normal;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    position: relative;
    overflow: hidden;
}

.floating-toolbar.theme-custom .toolbar-link-input .material-icons span,
.floating-toolbar.theme-custom .toolbar-link-input .material-icons {
    font-size: 0 !important;
    visibility: hidden;
}

.floating-toolbar.theme-custom .toolbar-link-input .material-icons::before {
    visibility: visible;
    font-size: 14px;
    color: var(--toolbar-text);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
}

/* Chevron/arrow styles */
.floating-toolbar.theme-custom::after {
    border-top-color: var(--toolbar-bg);
}

.floating-toolbar.theme-custom.below::after {
    border-bottom-color: var(--toolbar-bg);
}