.promnesia {
    /* Common used colors, you are welcome to customize them! */
    --opacity: 1;
    --main: rgba(255, 254, 252, var(--opacity));
    --secondary: #e8eef0;
    --thirdly: #f3f4f6;
    --borders: #dddddd;
    --text: #222222;
    --text-secondary: #999999;
    --accent: 178, 102, 40;
    --accent-secondary: #2aa198;

    /* Styling of main elements. Mostly you don't need to customize it */
    --header-bg: var(--secondary);
    --source-text: rgb(var(--accent));
    --count-text: var(--thirdly);
    --visits-item-bg: var(--thirdly);
    --visits-item-border: var(--borders);
    --locator-text: var(--accent-secondary);
    --timestamp-text: var(--text-secondary);
    --date-bg: var(--main);
    --date-color: var(--text);
}

.promnesia .error {
    font-size: 16px;
    color: red;
    font-weight: bold;
    white-space: pre-wrap;
}

.promnesia a {
    text-decoration: none;
}

a.promnesia-visited {
    /* hmm without important isn't working on some sites, e.g. google.com search results */
    outline: 0.5em solid !important;
}

#promnesia-sidebar {
    display: flex;
    flex-flow: column;
    height: 100%;
    margin: 0;
    color: var(--text);
    background: var(--main) !important;
    overscroll-behavior: contain;
}

#promnesia-sidebar-toolbar {
    display: flex;
    padding: 6px 8px 0 8px;
    border-bottom: 1px solid var(--borders);
    overflow: hidden;
    background: var(--header-bg);
}

#promnesia-sidebar-toolbar #button-mark.active {
    border-color: rgb(var(--accent));
    box-shadow: rgb(var(--accent)) 0px 1px 2px 0px;
}

#promnesia-sidebar-toolbar #button-close {
    margin-left: auto;
    padding: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 0.7em;
}

#promnesia-sidebar-filters {
    padding: 10px 10px 0px 10px;
    background: linear-gradient(to bottom, var(--thirdly) 0%, var(--main) 100%);
}

#promnesia-sidebar-filters .src.button {
    color: var(--source-text);
    padding: 4px 8px;
    font-weight: 400;
    box-shadow: none;
}

#promnesia-sidebar-filters .button:hover,
#promnesia-sidebar-filters .button.active {
    border-color: rgb(var(--accent));
    box-shadow: rgb(var(--accent), 0.5) 0 1px 1px;
}

#promnesia-sidebar-container {
    flex-grow: 1;
    overflow-y: auto;
}

/* meh, but ok for now */
#visits {
    list-style: none;
    margin: 8px;
    padding: 0;
}

#visits .context {
    white-space: pre-wrap; /* need to keep linebreaks  */
    padding-left: 1em;
}

/* TODO use proper flex layout... */
#visits .locator {
    padding-left: 1em;
    color: var(--locator-text);
}

#visits .locator a {
    color: var(--locator-text);
}

#visits .index {
    min-width: 1em; /* TODO meh, to make consistent with rest */
    display: inline-block;
}

#visits .normalised_url {
    padding-left: 1em;
}

#visits li {
    margin: 0;
    padding: 6px;
    background: var(--visits-item-bg);
    border: 1px solid var(--visits-item-border);
    border-radius: 3px;
    overflow-wrap: anywhere;
}

#visits li+li {
    margin-top: 8px;
}

#visits li #relative_indicator {
    display: none;
    padding-right: 0.5em;
}

#visits li.relative #relative_indicator {
    display: inline;
}

#visits li.relative {
    border-left: 3px solid;
    border-left-color: #00cc99;
}

#visits li:hover {
    border-color: rgba(var(--accent), 0.5);
}

#visits li.relative:hover {
    border-color: #00cc99;
}

#visits li.highlight {
    border-color: red;
}

#visits .datetime {
    white-space: nowrap;
    float: right;
    cursor: pointer;
    font-family: monospace;
    color: var(--timestamp-text);
}

/* TODO not great, but quickest way to render it neatly */
/* TODO not sure which order users expect first? */
#visits .time {
    padding-right: 1em;
}

#visits .date {
    width: 11ch; /* TODO not sure how to alighn them properly across all of boxes... */
    display: inline-block; /* otherwise width doesn't work on span */
    text-align: end;
    border-radius: 6px;
    padding: 2px 4px;
    background: var(--date-bg);
}

#visits .src {
    color: var(--source-text);
    font-weight: 700;

    margin-right: 0.2em; /* need to keep space between sources */
}

#visits .src.bookmark::before {
    content: "\2B50";
    margin-right: 4px;
    font-size: 0.9em;
    line-height: 1.2em;
}

#visits .src.logseq::before {
    content: "\1F4D4";
    margin-right: 4px;
    font-size: 0.9em;
    line-height: 1.2em;
}

#promnesia-sidebar-filters .src-count {
    background-color: rgb(var(--accent));
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    color: var(--count-text);
    margin-left: 1ex;
}

/* Buttons */
.promnesia .button {
    color: var(--text);
    background-color: var(--main);
    border: 1px solid var(--text-secondary);
    border-radius: 6px;
    box-shadow: var(--borders) 0 1px 1px;
    cursor: pointer;
    display: inline-block;
    /* set font for better emoji support */
    font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    list-style: none;
    padding: 6px 12px;
    margin: 0 6px 6px 0;
    appearance: none;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
}

.promnesia .button:hover {
    border-color: var(--text);
}

.promnesia .button:focus {
    outline: 1px transparent;
}

/* Search page*/
#promnesia-search #search_id {
    display: flex;
}

#promnesia-search #query_id {
    font-size: 1em;
    height: 1.7em;
    margin-right: 0.5em;
}
