---
---

@forward "obsidian/loading";
@forward "obsidian/modals";
@forward "obsidian/canvas";
@forward "obsidian/explorer";
@forward "obsidian/fileread";
@forward "obsidian/note";
@forward "obsidian/sidebar";

#obsidian {
    --bg: light-dark(white, #1e1e1e);
    --color-border: light-dark(#e0e0e0, #404040);
    --color-button: light-dark(#606060, #a0a0a0);
    --bg-tinted: light-dark(#f6f6f6, #181818);
    --color-accent: #5f6ce9;
    --color-accent-hover: #7a85eb;
    --color-text: light-dark(#363636, #dadada);
    --linked-mention-color: light-dark(#5f5f5f, #b0b0b0);
    --linked-mention-hover: light-dark(#eaeaea, #333);
    --explorer-button-hover: light-dark(#e4e4e4, #262626);
    height: calc(100vh - 62px);//adjust the subtractor based on your header height
    display: inherit;
    width: 100%;
    color: var(--color-text);

    table {
        th {
            background-color: light-dark(#f0f0f0, #121212);
            color: var(--color-text);
        }

        tr {
            &:nth-child(2n) {
                background-color: light-dark(#f7f7f7, #161616);
            }
        }
    }

    li {
        &::before {
            color: light-dark(#ababab, #656565);
        }
    }

    >* {
        height: initial;
    }

    #sidebar {
        display: flex;
        width: 2rem;
        flex-direction: column;
        align-items: flex-start;
        background-color: var(--bg-tinted);
        border-right: 1px solid var(--color-border);
    }

    #explorer {
        overflow-y: auto;
        max-height: 100vh;
        width: 18%;
        background-color: var(--bg-tinted);
        overscroll-behavior: none;
    }

    #divider {
        width: 3px;
        border-left: 1px solid var(--color-border);
        cursor: ew-resize;
        position: relative;
        transition: background-color 0.4s ease;
        background-color: var(--color-border);

        &:hover {
            background-color: var(--color-accent);
        }
    }

    #fileread {
        flex: 1;
        overflow-y: auto;
        max-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: var(--bg);
        position: relative;
    }

    &:has(input[name="color-scheme"][value="system"]:checked) {
        color-scheme: light dark;
    }

    &:has(input[name="color-scheme"][value="light"]:checked) {
        color-scheme: light;
    }

    &:has(input[name="color-scheme"][value="dark"]:checked) {
        color-scheme: dark;
    }
}