/* Koenig overrides for dark theme
/* -------------------------------------------------------------------- */


/* Action bar */

.kg-action-bar {
    background: var(--whitegrey-l2);
    border: 1px solid var(--whitegrey-l2);
}

.kg-action-bar:after {
    border-top-color: var(--whitegrey-l2);
}

.kg-action-bar:before {
    position: absolute;
    top: 36px;
    left: calc(50% - 10px);
    width: 0;
    border-top: 10px solid var(--whitegrey-l2);
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    content: "";
    font-size: 0;
    line-height: 0;
}

.kg-action-bar-divider {
    background: var(--lightgrey);
}

.kg-action-bar .fill-white g,
.kg-action-bar .fill-white path {
    fill: var(--darkgrey);
}


/* Card menu */
.koenig-cardmenu {
    background: var(--main-color-content-greybg);
    box-shadow: 0 0 0 1px rgba(99,114,130,.16), 0 8px 16px rgba(27,39,51,.08);
}

.kg-cardmenu-card-hover div {
    color: var(--middarkgrey-l1);
}

.kg-cardmenu-card-selected,
.kg-cardmenu-card-hover:hover {
    background: var(--whitegrey-l1);
}

.kg-card-type-codepen g,
.kg-card-type-codepen svg,
.kg-card-type-unsplash g,
.kg-card-type-unsplash svg {
    fill: var(--darkgrey);
}

.kg-cardmenu-card-hover svg [data-selector="bg"] {
    fill: var(--lightgrey);
}

.kg-cardmenu-card-hover svg [data-selector="fold"] {
    fill: var(--midlightgrey);
}

.kg-cardmenu-card-hover svg [data-selector="line"] {
    fill: var(--darkgrey);
}

.kg-cardmenu-card-hover:hover svg [data-selector="bg"] {
    fill: var(--lightgrey-l1);
}


/* Card styles */

.koenig-editor__editor pre {
    border: none;
}

.koenig-editor .gh-markdown-editor .editor-toolbar {
    background: color-mod(var(--whitegrey) l(-2%) s(+2%));
    border-top-color: var(--whitegrey-d2);
}

.kg-card-selected,
.kg-card-selected:hover {
    background-color: transparent !important;
    border-color: transparent !important;
}

.koenig-card-html--editor .CodeMirror {
    background: var(--white);
}

.kg-input-bar:after {
    border-top-color: var(--lightgrey);
}

.kg-link-toolbar {
    background: var(--lightgrey);
}

.kg-link-toolbar a {
    color: var(--middarkgrey);
}

.kg-link-toolbar svg g,
.kg-link-toolbar svg path {
    fill: var(--middarkgrey);
}