Ghost/ghost/admin/app/styles/components/koenig.css

/* Content Styles
/*
/* We use only margin-top to set the vertical spacings. The styles below
/* set up the margin for content pairs (e.g. paragraph preceded by a heading).
/* -------------------------------------------------------------------- */

/* Global Koenig content styles
/* -------------------------------------------------------------------- */
.koenig-editor__editor {
    font-family: var(--font-family);
    font-size: 1.7rem;
    font-weight: 300;
    letter-spacing: 0.1px;
    color: var(--darkgrey);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-font-feature-settings: "liga" on;
}

.koenig-editor__editor.__has-no-content:after,
.koenig-text-replacement-html-input__editor.__has-no-content:after,
.koenig-basic-html-textarea__editor.__has-no-content:after,
.koenig-editor__editor .koenig-basic-html-input__editor.__has-no-content:after {
    font-family: georgia,serif;
    font-weight: 300;
    letter-spacing: .02rem;
    line-height: 1.6em;
    font-size: 2rem;
    color: var(--midgrey-l2);
}

.koenig-editor__editor video {
    max-width: 100%;
}

/* Reset margins */

.koenig-editor__editor p,
.koenig-editor__editor h1,
.koenig-editor__editor h2,
.koenig-editor__editor h3,
.koenig-editor__editor h4,
.koenig-editor__editor h5,
.koenig-editor__editor h6,
.koenig-editor__editor blockquote {
    margin: 1.6rem 0 0;
    min-width: 100%;
    max-width: 100%;
}


/* Heading
/* -------------------------------------------------------------------- */

.koenig-editor__editor h1,
.koenig-editor__editor h2,
.koenig-editor__editor h3,
.koenig-editor__editor h4,
.koenig-editor__editor h5,
.koenig-editor__editor h6 {
    font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
    font-weight: 600;
    color: var(--black);
}

/* H1 should be almost the same size as the post title to suggest avoid using it */
.koenig-editor__editor h1 {
    font-size: 4.4rem;
    line-height: 1.15em;
}

.koenig-editor__editor h2 {
    font-size: 3.2rem;
    line-height: 1.32em;
}

.koenig-editor__editor h3 {
    font-size: 2.5rem;
    line-height: 1.35em;
}

/* H4 is almost the same size as H3 to discourage using it */
.koenig-editor__editor h4 {
    font-size: 2.2rem;
    line-height: 1.4em;
}

.koenig-editor__editor h5 {
    font-size: 2.0rem;
    line-height: 1.4em;
    font-weight: 700;
}

.koenig-editor__editor h6 {
    font-size: 1.85rem;
    line-height: 1.6em;
    font-weight: 700;
}

.koenig-editor__editor p + h1,
.koenig-editor__editor p + h2,
.koenig-editor__editor p + h3,
.koenig-editor__editor p + h4,
.koenig-editor__editor p + h5,
.koenig-editor__editor p + h6,

.koenig-editor__editor blockquote + h1,
.koenig-editor__editor blockquote + h2,
.koenig-editor__editor blockquote + h3,
.koenig-editor__editor blockquote + h4,
.koenig-editor__editor blockquote + h5,
.koenig-editor__editor blockquote + h6,

.koenig-editor__editor ul + h1,
.koenig-editor__editor ul + h2,
.koenig-editor__editor ul + h3,
.koenig-editor__editor ul + h4,
.koenig-editor__editor ul + h5,
.koenig-editor__editor ul + h6,

.koenig-editor__editor ol + h1,
.koenig-editor__editor ol + h2,
.koenig-editor__editor ol + h3,
.koenig-editor__editor ol + h4,
.koenig-editor__editor ol + h5,
.koenig-editor__editor ol + h6 {
    margin: 4.8rem 0 0;
}

/* Heading 1 vertical rhythm */

.koenig-editor__editor h1 + h1 {
    margin: 1.4rem 0 0;
}

.koenig-editor__editor h2 + h1,
.koenig-editor__editor h3 + h1 {
    margin: 1.0rem 0 0;
}

.koenig-editor__editor h4 + h1,
.koenig-editor__editor h5 + h1 {
    margin: 0.8rem 0 0;
}

.koenig-editor__editor h6 + h1 {
    margin: 0.6rem 0 0;
}

.koenig-editor__editor div + h1 {
    margin: 4.8rem 0 0;
}


/* Heading 2 */

.koenig-editor__editor h1 + h2 {
    margin: 1.6rem 0 0;
}

.koenig-editor__editor h2 + h2,
.koenig-editor__editor h3 + h2,
.koenig-editor__editor h4 + h2,
.koenig-editor__editor h5 + h2 {
    margin: 0.8rem 0 0;
}

.koenig-editor__editor h6 + h2 {
    margin: 0.4rem 0 0;
}

.koenig-editor__editor div + h2 {
    margin: 4.8rem 0 0;
}


/* Heading 3 - 6 (share common styles) */

.koenig-editor__editor h1 + h3,
.koenig-editor__editor h2 + h3,

.koenig-editor__editor h1 + h4,
.koenig-editor__editor h2 + h4,

.koenig-editor__editor h1 + h5,
.koenig-editor__editor h2 + h5,

.koenig-editor__editor h1 + h6,
.koenig-editor__editor h2 + h6 {
    margin: 1.2rem 0 0;
}

.koenig-editor__editor h3 + h4 {
    margin: 0.8rem 0 0;
}

.koenig-editor__editor h3 + h3,
.koenig-editor__editor h4 + h3,
.koenig-editor__editor h5 + h3,

.koenig-editor__editor h4 + h4,
.koenig-editor__editor h5 + h4,

.koenig-editor__editor h3 + h5,
.koenig-editor__editor h4 + h5,
.koenig-editor__editor h5 + h5,

.koenig-editor__editor h3 + h6,
.koenig-editor__editor h4 + h6 {
    margin: 0.8rem 0 0;
}

.koenig-editor__editor h5 + h6 {
    margin: 0.4rem 0 0;
}

.koenig-editor__editor h6 + h3,
.koenig-editor__editor h6 + h4,
.koenig-editor__editor h6 + h5,
.koenig-editor__editor h6 + h6 {
    margin: 0.4rem 0 0;
}

.koenig-editor__editor div + h3,
.koenig-editor__editor div + h4,
.koenig-editor__editor div + h5,
.koenig-editor__editor div + h6 {
    margin: 4.8rem 0 0;
}

/* Headings right after post title */
.koenig-editor__editor h1:first-child,
.koenig-editor__editor h2:first-child,
.koenig-editor__editor h3:first-child,
.koenig-editor__editor h4:first-child,
.koenig-editor__editor h5:first-child,
.koenig-editor__editor h6:first-child {
    margin-top: 0rem;
}

@media (max-width: 500px) {
    .koenig-editor__editor h1 {
        font-size: 3.2rem;
    }

    .koenig-editor__editor h2 {
        font-size: 2.8rem;
    }

    .koenig-editor__editor h3 {
        font-size: 2.4rem;
    }

    .koenig-editor__editor h4 {
        font-size: 2.3rem;
    }

    .koenig-editor__editor h5 {
        font-size: 2.0rem;
    }

    .koenig-editor__editor h6 {
        font-size: 1.9rem;
    }
}


/* Paragraph
/* -------------------------------------------------------------------- */

.koenig-editor__editor p,
.koenig-editor__editor blockquote,
.koenig-editor__editor ul:not(.kg-action-bar):not(.kg-link-toolbar),
.koenig-editor__editor ol
 {
    font-family: georgia,serif;
    font-weight: 400;
    line-height: 1.6em;
    font-size: 2.0rem;
}

.koenig-editor__editor h1 + p {
    margin: 1.0rem 0 0;
}

.koenig-editor__editor h2 + p {
    margin: 0.8rem 0 0;
}

.koenig-editor__editor h3 + p,
.koenig-editor__editor h4 + p,
.koenig-editor__editor h5 + p,
.koenig-editor__editor h6 + p {
    margin: 0.8rem 0 0;
}

.koenig-editor__editor p + p,
.koenig-editor__editor blockquote + p,
.koenig-editor__editor ul + p,
.koenig-editor__editor ol + p
 {
    margin: 3.2rem 0 0;
}

.koenig-editor__editor div + p { /* Mobiledoc cards can be addressed by their wrapper div element */
    margin: 2.8rem 0 0;
}

/* Paragraph right after title */
.koenig-editor__editor p:first-child {
    margin-top: 0rem;
}

@media (max-width: 500px) {
    .koenig-editor__editor p,
    .koenig-editor__editor blockquote,
    .koenig-editor__editor ul:not(.kg-action-bar):not(.kg-link-toolbar),
    .koenig-editor__editor ol
    {
        font-size: 1.8rem;
    }
}


/* Lists
/* -------------------------------------------------------------------- */

.koenig-editor__editor ul:not(.kg-action-bar):not(.kg-link-toolbar),
.koenig-editor__editor ol {
    margin: 1.6rem 0 0;
    padding: 0;
    min-width: 100%;
    max-width: 100%;
}

.koenig-editor__editor ul:not(.kg-action-bar):not(.kg-link-toolbar) li {
    margin: 1.0rem 0 0 2.4rem;
    padding: 0 0 0 0.6rem;
    line-height: 3.2rem;
}

.koenig-editor__editor ul:not(.kg-action-bar):not(.kg-link-toolbar) li:first-child {
    margin: 0 0 0 2.4rem;
}

.koenig-editor__editor ol li {
    margin: 1.0rem 0 0 2.2rem;
    padding: 0 0 0 0.8rem;
    line-height: 3.2rem;
}

.koenig-editor__editor ol li:first-child {
    margin: 0 0 0 2.2rem;
}

.koenig-editor__editor p + ul:not(.kg-action-bar):not(.kg-link-toolbar),
.koenig-editor__editor p + ol {
    margin: 3.0rem 0 0;
}

.koenig-editor__editor ul:not(.kg-action-bar):not(.kg-link-toolbar) + ul:not(.kg-action-bar):not(.kg-link-toolbar),
.koenig-editor__editor ul:not(.kg-action-bar):not(.kg-link-toolbar) + ol,
.koenig-editor__editor ol + ul:not(.kg-action-bar):not(.kg-link-toolbar),
.koenig-editor__editor ol + ol,
.koenig-editor__editor blockquote + ul:not(.kg-action-bar):not(.kg-link-toolbar),
.koenig-editor__editor blockquote + ol {
    margin: 3.0rem 0 0;
}

.koenig-editor__editor h1 + ul:not(.kg-action-bar):not(.kg-link-toolbar),
.koenig-editor__editor h1 + ol,
.koenig-editor__editor h2 + ul:not(.kg-action-bar):not(.kg-link-toolbar),
.koenig-editor__editor h2 + ol {
    margin: .8rem 0 0;
}
.koenig-editor__editor h3 + ul:not(.kg-action-bar):not(.kg-link-toolbar),
.koenig-editor__editor h3 + ol,
.koenig-editor__editor h4 + ul:not(.kg-action-bar):not(.kg-link-toolbar),
.koenig-editor__editor h4 + ol,
.koenig-editor__editor h5 + ul:not(.kg-action-bar):not(.kg-link-toolbar),
.koenig-editor__editor h5 + ol,
.koenig-editor__editor h6 + ul:not(.kg-action-bar):not(.kg-link-toolbar),
.koenig-editor__editor h6 + ol {
    margin: 1.2rem 0 0;
}

.koenig-editor__editor div + ul:not(.kg-action-bar):not(.kg-link-toolbar),
.koenig-editor__editor div + ol {
    margin: 2.8rem 0 0;
}

.koenig-editor__editor ul:not(.kg-action-bar):not(.kg-link-toolbar) ul:not(.kg-action-bar):not(.kg-link-toolbar),
.koenig-editor__editor ul:not(.kg-action-bar):not(.kg-link-toolbar) ol,
.koenig-editor__editor ol ul:not(.kg-action-bar):not(.kg-link-toolbar),
.koenig-editor__editor ol ol {
    margin: 1.0rem 0 2rem;
}

/* Lists right after title */
.koenig-editor__editor ul:not(.kg-action-bar):not(.kg-link-toolbar):first-child,
.koenig-editor__editor ol:first-child,
.koenig-editor__editor ul:not(.kg-action-bar):not(.kg-link-toolbar):first-child,
.koenig-editor__editor ol:first-child {
    margin-top: 0rem;
}


/* Cards in general
/* -------------------------------------------------------------------- */

.koenig-editor__editor > div {
    line-height: 0;
    min-width: 100%;
}

.koenig-editor__editor > div + div {
    margin: 3.2rem 0 0;
}

.koenig-editor__editor > p + div,
.koenig-editor__editor > blockquote + div,
.koenig-editor__editor > ul + div,
.koenig-editor__editor > ol + div {
    margin: 3.2rem 0 0;
}

.koenig-editor__editor > h1 + div {
    margin: 2.8rem 0 0;
}

.koenig-editor__editor > h2 + div,
.koenig-editor__editor > h3 + div,
.koenig-editor__editor > h4 + div,
.koenig-editor__editor > h5 + div,
.koenig-editor__editor > h6 + div {
    margin: 1.6rem 0 0;
}

.koenig-editor__editor hr {
    margin: 1.6rem 0;
}

/* First card right after post title */

.koenig-editor__editor > div:first-child {
    margin-top: 3.2rem;
}

/* Links
/* -------------------------------------------------------------------- */

.koenig-editor__editor a:not([class]) {
    color: var(--darkgrey-d2);
    text-decoration: underline;
}


/* Blockquote
/* -------------------------------------------------------------------- */

.koenig-editor__editor blockquote p {
    margin: 0;
}

.koenig-editor__editor blockquote {
    border-left: 0.25rem solid var(--blue);
    padding-left: 2.0rem;
    font-style: italic;
}

.koenig-editor__editor h1 + blockquote,
.koenig-editor__editor h2 + blockquote {
    margin: .8rem 0 0;
}

.koenig-editor__editor h3 + blockquote,
.koenig-editor__editor h4 + blockquote,
.koenig-editor__editor h5 + blockquote,
.koenig-editor__editor h6 + blockquote {
    margin: .4rem 0 0;
}

.koenig-editor__editor p + blockquote,
.koenig-editor__editor blockquote + blockquote {
    margin: 3.2rem 0 0;
}


/* Mobiledoc cards can be selected by their wrapper div element */
.koenig-editor__editor div + blockquote {
    margin: 2.8rem 0 0;
}


/* Code
/* ------------------------------------------------------------------ */
.koenig-card-html--editor .CodeMirror,
.koenig-editor__editor code,
.koenig-editor__editor pre {
    font-family: Consolas,Liberation Mono,Menlo,Courier,monospace;
    background: color-mod(var(--whitegrey) lightness(+4%));
    border: 1px solid var(--whitegrey);
}

.koenig-editor__editor code {
    border-radius: 2px;
    color: var(--darkgrey-d2);
    font-size: .8em;
    line-height: 1em;
    padding: .4rem .4rem .2rem;
    vertical-align: middle;
    white-space: pre-wrap;
}

.koenig-editor__editor pre code {
    border: none;
    font-size: 1.6rem;
    color: var(--darkgrey-d2);
    padding: 0;
}

.koenig-editor__editor pre {
    line-height: 1.4em;
    padding: .8rem .8rem .4rem;
    border-radius: .4rem;
    font-size: 1.6rem;
    overflow: auto;
    white-space: pre;
    width: 100%;
    color: var(--darkgrey-d2);
}

.koenig-editor__editor pre.js-embed-placeholder,
.koenig-editor__editor pre.iframe-embed-placeholder {
    margin: 0.4rem 0 !important;
    color: var(--midgrey);
}


/* Markdown
/* --------------------------------------------------------------- */

/*
  Resetting the default top margin of the redered markdown content. This is
  needed because the top margin is applied to the card itself. It's the 2nd
  child because there's an SVG at the first place.
  NOTE: this is not too elegant.
*/

.koenig-card-markdown-rendered > :nth-child(2) {
    margin: 0;
}

.koenig-card-markdown-rendered hr {
    margin: 3.2rem 0 0;
}

.koenig-card-markdown-rendered hr + p {
    margin: 3.2rem 0 0;
}

.koenig-editor .gh-markdown-editor pre {
    border: none;
    background: none;
    white-space: normal;
}

.koenig-editor .gh-markdown-editor a {
    box-shadow: none;
}


/* HTML editor
/* --------------------------------------------------------------- */

.koenig-card-html-rendered {
    line-height: 1.8em;
}

.koenig-card-html-rendered > :first-child {
    margin: 0;
}

.koenig-card-html--editor pre {
    border: none;
    background: none;
    white-space: pre-line;
    padding: 0 .8rem;
    line-height: 1.4em;
}

.koenig-card-html--editor .CodeMirror {
    border: none;
    margin: 0 -8px;
}

.koenig-card-html--editor .CodeMirror-linenumber {
    padding: 12px 3px 0 5px;
    color: var(--midlightgrey-l2);
}

.koenig-card-html--editor .CodeMirror-gutters {
    border: none;
    background: none;
}


/* Images
/* --------------------------------------------------------------- */

.koenig-breakout-wide {
    margin: auto calc(50% - (50vw - var(--editor-sidebar-width)) - .8rem);
    width: calc(65vw + 2px - var(--editor-sidebar-width));
    min-width: calc(100% + 18rem);
    transform: translateX(calc(50vw - 50% + .8rem - var(--editor-sidebar-width)));
}

@media (min-width: 500px) and (max-width: 1080px) {
    .koenig-breakout-wide {
        min-width: calc(100% + 10rem);
    }
}

@media (max-width: 500px) {
    .koenig-breakout-wide {
        min-width: calc(100% + 3.6rem);
    }
}

.koenig-breakout-full {
    margin-left: calc(50% - 50vw + (var(--editor-sidebar-width) / 2));
    margin-right: calc(50% - 50vw + (var(--editor-sidebar-width) / 2));
}

.koenig-breakout-full .mw-100vw {
    max-width: calc(100vw - var(--editor-sidebar-width));
}

.mw-100vw.kg-image-full--sidebar {
    max-width: calc(100vw - 280px);
}

@media (max-width: 1024px) {
    .koenig-breakout-full {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    .koenig-breakout-full .mw-100vw {
        max-width: 100vw;
    }
}

/* Table
/* --------------------------------------------------------------- */

.koenig-editor__editor table {
    font-size: 1.75rem;
    margin: 0;
    font-family: georgia,serif;
    letter-spacing: .02rem;
    line-height: 1.6em;
}

.koenig-editor__editor table tr td,
.koenig-editor__editor table tr th {
    vertical-align: top;
    border-bottom: 1px solid var(--whitegrey);
}

/* Captions
/* --------------------------------------------------------------- */

/* override `.koenig-editor__editor p` by inheriting styles from parent figcaption classes */
.koenig-editor__editor figcaption p {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
}

.koenig-basic-html-input__editor code {
    font-size: 1.4rem;
}

/*
/* UI Styles
/*
/* Styles that extend Spirit classes.
/* -------------------------------------------------------------------- */

.kg-card-hover:hover {
    box-shadow: 0 0 0 1px var(--green);
}

.kg-card-selected,
.kg-card-selected:hover {
    box-shadow: 0 0 0 2px var(--green);
}

/* Force a 16:10 aspect ratio */
.kg-media-placeholder:before {
    content: "";
    float: left;
    padding-bottom: 62.5%;
}

.kg-media-placeholder:after {
    clear: left;
    content: " ";
    display: table;
}

.kg-image-button svg {
  transform: scale(1.0);
  transition: var(--animation-speed-normal) ease-out;
  opacity: 0.85;
}

.kg-image-button:hover svg {
  transform: scale(1.05);
  opacity: 1.0;
}

.kg-placeholder-image {
    width: 152px;
    height: 122px;
}

.kg-placeholder-gallery {
    width: 141px;
    height: 131px;
}

/* Link hover tooltip - override inherited styles from .koenig-editor__editor */
.kg-link-toolbar a {
    color: inherit;
    -webkit-font-smoothing: initial;
}

/* Link input bar */
.kg-link-input {
    min-width: 225px; /* Same width as text toolbar */
    padding: 4px 8px;
    caret-color: auto;
    border: 1px solid var(--green);
    font-size: 1.4rem;
    background-color: var(--white);
}

.kg-input-bar-close {
    position: absolute;
    top: 22px;
    right: 10px;
    left: auto;
    line-height: 1.2rem;
    z-index: 100;
    cursor: pointer;
}

.kg-input-bar:before,
.kg-input-bar:after {
    position: absolute;
    top: 47px;
    left: calc(50% - 8px);
    width: 0;
    content: "";
    font-size: 0;
    line-height: 0;
}

.kg-input-bar:before {
    border-top: 9px solid var(--green);
    border-right: 9px solid transparent;
    border-left: 9px solid transparent;
}

.kg-input-bar:after {
    border-top: 8px solid var(--white);
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    margin-left: 1px;
}

/* Action bar styles */
.kg-action-bar {
    top: 8px;
}

.kg-action-bar a {
    min-height: 34px;
}

.kg-action-bar:after {
    position: absolute;
    top: 36px;
    left: calc(50% - 8px);
    width: 0;
    border-top: 8px solid var(--darkgrey-d1);
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    content: "";
    font-size: 0;
    line-height: 0;
    transition: left ease 0.06s;
}

.kg-action-bar-divider {
    width: 1px;
}

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

.kg-cardmenu-card-hover .kg-cardmenu-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity ease-in-out 0.15s;
    padding: 5px;
    margin-top: -2px;
    margin-bottom: -2px;
    margin-left: auto;
    margin-right: 8px;
    border-radius: 3px;
}

.kg-cardmenu-card-hover:hover svg [data-selector="bg"] {
    fill: #fff;
}

.kg-cardmenu-card-hover:hover .kg-cardmenu-action-icon {
    opacity: 1.0;
}

.kg-cardmenu-card-hover .kg-cardmenu-action-icon:hover {
    background: var(--whitegrey-d1);
}

.kg-cardmenu-card-hover .kg-cardmenu-action-icon svg {
    margin: 0;
    height: 1em;
}

.kg-cardmenu-card-hover .kg-cardmenu-action-icon svg path {
    fill: var(--red);
}

.kg-cardmenu-card-hover .kg-cardmenu-action-icon:hover svg path {
    fill: var(--red);
}

/* Padded container housing title + editor canvas, scrollable content */
.gh-koenig-editor-pane {
    padding: 11vw 92px;
}

@media (min-width: 500px) and (max-width: 960px) {
    .gh-koenig-editor-pane {
        padding: 15vw 92px;
    }
}

@media (max-width: 500px) {
    .gh-koenig-editor-pane {
        padding: 20vw 32px;
    }
}

/* Use flex-grow to fill the available vertical space so clicks outside the
   editor content can trigger focus */
.gh-koenig-editor-pane .koenig-editor {
    cursor: text;
}

.koenig-editor {
    max-width: 740px;
}

/* ⨁ menu
/* --------------------------------------------------------------- */
.koenig-plus-menu-button {
    margin: -2px 0 0 -66px;
}

.koenig-plus-menu-button:hover {
    border-color: var(--darkgrey);
}

.koenig-plus-menu-button:hover svg path,
.koenig-plus-menu-button:hover svg g {
    stroke: var(--darkgrey);
}


@media (max-width: 1024px) {
  .koenig-plus-menu-button {
        right:10px;
  }
}


/* Chrome has a bug with its scrollbars on this element which has been reported here: https://bugs.chromium.org/p/chromium/issues/detail?id=697381 */
.koenig-cardmenu {
    width: 312px;
    max-height: 376px;
    padding-top: 0;
    background-clip: padding-box;
    z-index: 9999999; /* have to compete with codemirror */
    left: -16px;
    top: -10px;
}

/*Firefox has a bug with padding-bottom being ignored when using overflow:auto which has been reported here: https://bugzilla.mozilla.org/show_bug.cgi?id=748518. Below solution works cross browsers*/
.koenig-cardmenu:after {
    content: "";
    padding: .8rem;
    display: block;
}

/* Card settings panel
/* --------------------------------------------------------------- */

.kg-settings-panel {
    position: fixed;
    width: 320px;
    max-height: 60vh;
    overflow: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: var(--white);
    line-height: 1em;
    z-index: 9999999999;
    border-radius: 5px;
    font-size: 1.3rem;
    box-shadow:
        0px -1px 10px rgba(0, 0, 0, 0.08),
        0px 2.8px 2.2px rgba(0, 0, 0, 0.014),
        0px 6.7px 5.3px rgba(0, 0, 0, 0.02),
        0px 12.5px 10px rgba(0, 0, 0, 0.025),
        0px 22.3px 17.9px rgba(0, 0, 0, 0.03),
        0px 41.8px 33.4px rgba(0, 0, 0, 0.036),
        0px 100px 80px rgba(0, 0, 0, 0.05)
    ;
}

.kg-settings-panel-enter-active,
.kg-settings-panel-leave-active {
    transition: opacity .2s;
}
.kg-settings-panel-enter,
.kg-settings-panel-leave-to {
    opacity: 0;
}

.kg-settings-panel-control {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 8px;
}

.kg-settings-panel-control:not(:first-of-type):not(hr + .kg-settings-panel-control) {
    margin-top: 8px;
}

.kg-settings-panel-control-horizontal {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.kg-settings-panel-control-label {
    font-weight: 700;
}

.kg-settings-panel-control-info {
    font-size: 12px !important;
    font-family: var(--font-family) !important;
    line-height: 1.4em !important;
    color: var(--middarkgrey);
}

.kg-settings-panel-divider {
    margin: 8px -24px !important;
    border: none;
    border-top: 1px solid var(--whitegrey);
}

.kg-settings-panel-control-input .gh-input,
.kg-settings-panel-control-input .gh-select,
.kg-settings-panel-control-input .ember-power-select-trigger {
    font-size: 1.4rem !important;
    padding: 5px 10px;
    font-weight: 500;
}

.kg-settings-panel-control-input .ember-power-select-trigger svg {
    position: absolute;
    top: 18px;
    right: 12px;
}

/* TODO: needed to fix right margin - should be somewhere more generic? */
.kg-settings-panel-control .for-switch.x-small .switch {
    width: 34px !important;
}

/* Cards
/* --------------------------------------------------------------- */

.kg-card-help {
    background: color-mod(var(--whitegrey) l(+3%));
    margin: 12px -13px -1px;
    padding: 6px;
}

.kg-card-help p {
    text-align: center;
    font-family: sans-serif;
    font-size: 1.4rem;
    color: var(--midlightgrey);
}

.kg-card-help a.kg-card-help-icon-link {
    text-decoration: none;
    box-shadow: none;
    padding-bottom: 2px;
}

.kg-card-help svg {
    width: 1.4rem;
}

.kg-bookmark-card {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--whitegrey);
    background: var(--white);
    border-radius: 4px;
}

.kg-bookmark-container {
    display: flex;
    color: var(--darkgrey);
    text-decoration: none;
    box-shadow: none;
    min-height: 120px; /* Just to make sure it's not a super-tiny box */
}

.kg-bookmark-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-basis: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 20px;
}

.kg-bookmark-title {
    font-size: 1.5rem;
    line-height: 1.5em;
    font-weight: 600;
}

.kg-bookmark-container:hover .kg-bookmark-title {
    color: var(--blue);
}

.kg-bookmark-description {
    display: -webkit-box;
    font-size: 1.4rem;
    line-height: 1.5em;
    margin-top: 3px;
    color: var(--middarkgrey);
    font-weight: 400;
    max-height: 44px;
    overflow-y: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.kg-bookmark-thumbnail {
    position: relative;
    flex-grow: 1;
    min-width: 33%;
}

.kg-bookmark-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.kg-bookmark-metadata {
    color: var(--darkgrey);
    font-size: 1.4rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    margin-top: 22px;
}

.kg-bookmark-icon {
    width: 20px;
    height: 20px;
    margin-right: 6px;
}

.kg-bookmark-publisher {
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 240px;
    white-space: nowrap;
    display: block;
    line-height: 1.65em;
}

.kg-bookmark-author:before {
    content: "•";
    color: var(--darkgrey);
    margin: 0 6px;
}

.kg-bookmark-author {
    color: var(--middarkgrey);
    font-weight: 400;
}

.kg-email-card p:first-of-type {
    margin-top: 0;
}

.kg-paywall-separator {
    display: flex;
    align-items: center;
    height: 1em;
    text-align: center;
    color: var(--midlightgrey-d1);
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: 600;
    white-space: pre;
}

.kg-paywall-separator::before,
.kg-paywall-separator::after {
    content: '';
    flex: 1;
    border-top: 1px solid #dfe1e3;
}

.kg-paywall-separator:not(:empty)::before {
    margin-right: .5em;
}

.kg-paywall-separator:not(:empty)::after {
    margin-left: .5em;
}

/* Email CTA card
/* --------------------------------------------------------------- */

.kg-email-cta-card {
    padding-bottom: 24px;
}

/* Email-CTA card
/* -------------------------------------------------------------------------- */

.kg-email-cta-card .border-top {
    margin: -1.6rem 0 5rem;
}

.kg-email-cta-card .border-top.edit-mode {
    margin: 2.4rem 0 5rem;
}

.kg-email-cta-card .border-bottom {
    margin: 5rem 0 0;
}

.kg-email-cta-card .kg-card-help {
    margin: 0 -13px 16px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--whitegrey);
    background: var(--whitegrey-l2);
}

.kg-email-cta-card .kg-card-help p {
    color: var(--midgrey);
    text-align: left;
}

.kg-email-cta-card .kg-card-help .ember-power-select-trigger:not(.gh-setting-dropdown):not(.ember-power-select-multiple-trigger) svg {
    width: 8px;
    height: 6px;
    margin-top: 0;
}

.kg-email-cta-card .kg-card-help .ember-basic-dropdown-content {
    width: 200px !important;
}

.kg-email-cta-card .kg-card-help .ember-power-select-inline {
    padding: 0 2px;
    color: var(--darkgrey);
}

.email-cta-toolbar {
    display: flex;
    margin: 24px -13px 0;
    padding: .8rem 1rem;
    border-top: 1px solid var(--whitegrey);
}

.email-cta-toolbar .borders {
    margin-right: 1rem;
    border-right: 1px solid var(--whitegrey-d2);
    border-radius: 0;
}

.gh-btn-group.email-cta-align {
    background: none;
    margin-right: 1rem;
    padding-right: 1rem;
    border-right: 1px solid var(--whitegrey-d2);
}

.gh-btn-group.email-cta-align .gh-btn span {
    padding: 0 4px;
}

.gh-btn-group.email-cta-align .gh-btn-group-selected span {
    box-shadow: none;
}

.gh-btn-group.email-cta-align .gh-btn-group-selected svg {
    fill: var(--green-d1);
}

.gh-btn-group.email-cta-align .gh-btn svg {
    width: 18px;
    height: 18px;
}

.gh-btn.email-cta-toolbar-item {
    margin-right: 1rem;
    box-shadow: none;
}

.gh-btn.email-cta-toolbar-item svg {
    width: 18px;
    height: 18px;
    margin-right: 0;
}

.gh-btn.email-cta-toolbar-item span {
    margin-top: 2px;
    padding: 0 8px;
}

.gh-btn.email-cta-toolbar-item svg path {
    stroke: none;
}

.email-cta-button {
    margin-top: 2rem;
    padding: 4px;
    border: 0;
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
    user-select: auto;
}

.email-cta-button-text-input {
    width: auto;
    max-width: 200px;
    margin-right: .8rem;
    color: var(--black);
    font-size: 1.5rem;
    font-weight: 400;
    user-select: auto;
}

.email-cta-button-url-input {
    width: 100%;
    padding: 4px 12px;
    color: var(--black);
    font-size: 1.5rem;
    font-weight: 400;
}

.gh-member-segment-select-dropdown {
    border-top: 1px solid var(--input-border-color) !important;
    border-radius: 3px !important;
}

.kg-email-cta-card .gh-btn-accent {
    margin-top: 2.4rem;
}

.kg-email-cta-card .gh-btn-accent span {
    font-size: 1.5rem;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
}

.gh-email-cta-segment-indicator p {
    padding: 6px 0 29px !important;
    color: var(--midlightgrey-d1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: 600;
}


/* Callout card
/* --------------------------------------------------------------- */

.kg-card-callout-container {
    position: relative;
    min-height: 4rem;
    min-width: 100%;
    margin: 0;
    padding: 0;
}

.kg-card-callout {
    display: flex;
    padding: 20px 28px;
    background: var(--whitegrey-l1);
    border-radius: var(--border-radius);
}

.kg-card-callout-grey {
    background: rgba(124, 139, 154, 0.13);
}

.kg-card-callout-white {
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25);
}

.kg-card-callout-blue {
    background: rgba(33, 172, 232, 0.12);
}

.kg-card-callout-green {
    background: rgba(52, 183, 67, 0.12);
}

.kg-card-callout-yellow {
    background: rgba(240, 165, 15, 0.13);
}

.kg-card-callout-red {
    background: rgba(209, 46, 46, 0.11);
}

.kg-card-callout-pink {
    background: rgba(225, 71, 174, 0.11);
}

.kg-card-callout-purple {
    background: rgba(135, 85, 236, 0.12);
}

.kg-card-callout-accent {
    background: var(--adjusted-accent-color);
}

.kg-card-callout-accent p {
    color: var(--white);
}

.kg-callout-emoji {
    height: 32px;
    margin-right: 8px;
    margin-left: -8px;
    padding: 0 8px;
    font-size: 2rem;
    line-height: 1.6;
    cursor: pointer;
    border-radius: var(--border-radius);
}

.kg-callout-emoji:hover,
.kg-emoji-picker-active {
    background: rgba(124, 139, 154, 0.13);
}

.kg-callout-palette {
    display: flex;
    justify-content: space-between;
    margin-top: .4rem;
}

.kg-callout-palette-swatch {
    display: inline-block;
    cursor: pointer;
    width: 2.4rem;
    height: 2.4rem;
    padding: 3px;
    border-radius: 3px;
}

.kg-callout-palette-swatch:hover {
    box-shadow: inset 0 0 0 1px var(--green);
}

.kg-callout-palette-swatch.selected-swatch {
    box-shadow: inset 0 0 0 1px var(--green);
}

.kg-callout-palette-swatch-grey {
    background: rgba(124, 139, 154, 0.25);
    box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.3);
}

.kg-callout-palette-swatch-white {
    background: transparent;
    border: 1px solid rgba(124, 139, 154, 0.45);
}

.kg-callout-palette-swatch-blue {
    background: rgba(33, 172, 232, 0.25);
    box-shadow: inset 0 0 0 1px rgba(33, 172, 232, 0.3);
}

.kg-callout-palette-swatch-green {
    background: rgba(52, 183, 67, 0.25);
    box-shadow: inset 0 0 0 1px rgba(52, 183, 67, 0.3);
}

.kg-callout-palette-swatch-yellow {
    background: rgba(240, 165, 15, 0.25);
    box-shadow: inset 0 0 0 1px rgba(240, 165, 15, 0.3);
}

.kg-callout-palette-swatch-red {
    background: rgba(209, 46, 46, 0.25);
    box-shadow: inset 0 0 0 1px rgba(209, 46, 46, 0.3);
}

.kg-callout-palette-swatch-pink {
    background: rgba(225, 71, 174, 0.25);
    box-shadow: inset 0 0 0 1px rgba(225, 71, 174, 0.3);
}

.kg-callout-palette-swatch-purple {
    background: rgba(135, 85, 236, 0.25);
    box-shadow: inset 0 0 0 1px rgba(135, 85, 236, 0.3);
}

.kg-callout-palette-swatch-accent {
    background: var(--adjusted-accent-color);
}

.emoji-picker__wrapper {
    margin-top: 1rem !important;
}

.emoji-picker {
    background: var(--white) !important;
    border: 0 !important;
    font-family: var(--font-family) !important;
    box-shadow:
        0px -1px 10px rgba(0, 0, 0, 0.08),
        0px 2.8px 2.2px rgba(0, 0, 0, 0.014),
        0px 6.7px 5.3px rgba(0, 0, 0, 0.02),
        0px 12.5px 10px rgba(0, 0, 0, 0.025),
        0px 22.3px 17.9px rgba(0, 0, 0, 0.03),
        0px 41.8px 33.4px rgba(0, 0, 0, 0.036),
        0px 100px 80px rgba(0, 0, 0, 0.05)
    ;
}

.emoji-picker__search-container {
    margin: 0 !important;
}

.emoji-picker__search {
    padding: 24px 16px !important;
    color: var(--middarkgrey) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--whitegrey-d1) !important;
    font-family: var(--font-family) !important;
    font-size: 1.45rem !important;
    border-radius: 0 !important;
}

.emoji-picker__search-icon {
    top: calc(50% - .4rem) !important;
    right: 1.8rem !important;
    color: var(--lightgrey) !important;
}

button.emoji-picker__category-button {
    color: var(--midlightgrey) !important;
}

button.emoji-picker__category-button.active {
    color: var(--darkgrey) !important;
    border-bottom: var(--category-border-bottom-size) solid transparent !important;
}

.emoji-picker__content {
    margin-top: 2rem !important;
}

.emoji-picker__emojis {
    padding: 0 8px !important;
}

.emoji-picker__emoji:hover,
.emoji-picker__emoji:focus {
    background: var(--whitegrey) !important;
    border-radius: var(--border-radius) !important;
}

.emoji-picker__category-name {
    margin: .8rem 0 1rem !important;
    color: var(--darkgrey) !important;
    font-family: var(--font-family) !important;
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

/* Accordion card
/* --------------------------------------------------------------- */

.kg-accordion-card-container {
    position: relative;
    min-height: 4rem;
    min-width: 100%;
    margin: 0;
    padding: 0;
}

.kg-accordion-card {
    display: flex;
    padding: 16px 24px;
    border: 1px solid rgba(127, 127, 127, 0.15);
    border-radius: 4px;
    flex-direction: column;
}

.kg-accordion-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.kg-accordion-card-heading {
    margin-right: 16px;
}

.kg-accordion-card-heading h4 {
    font-weight: 600 !important;
    font-size: 2rem !important;
}

.kg-accordion-card-heading ::after {
    font-weight: 600 !important;
    font-size: 2rem !important;
    letter-spacing: .02rem;
    line-height: 1.6em;
}

.kg-accordion-card-content ::after {
    line-height: 1.6em;
}

.kg-accordion-card-content {
    margin-top: 8px;
}

.kg-accordion-card-content p {
    font-size: 1.6rem !important;
    font-family: var(--font-family);
}

.kg-accordion-card-arrow-container {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.kg-accordion-card-arrow {
    width: 14px;
    color: var(--lightgrey);
}

.kg-accordion-card-content ::after,
.kg-accordion-card-content .koenig-basic-html-textarea__editor p {
    font-size: 1.6rem !important;
}

/* Button card
/* --------------------------------------------------------------- */
.kg-button-card {
    padding: 12px;
}

.kg-button-card .gh-btn span {
    font-size: 1.5rem;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
}

/* NFT card
/* --------------------------------------------------------------- */
.kg-nft-card a {
    display: flex;
    flex: auto;
    flex-direction: column;
    text-decoration: none !important;
    font-size: 1.4rem;
    font-weight: 400;
    width: 100%;
    min-width: 440px;
    max-width: 512px;
    border: 1px solid var(--whitegrey);
    border-radius: 5px;
    color: #15171A !important;
    background: #fff;
    border-radius: 5px;
}

.kg-nft-image {
    border-radius: 5px 5px 0 0;
    width: 100%;
}

.kg-nft-card:hover {
    color: inherit;
}

.kg-nft-card * {
    position: static;
}

.kg-nft-metadata {
    padding: 20px;
}

.kg-nft-card .kg-nft-image {
    border-radius: 5px 5px 0 0;
}

.kg-nft-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.kg-nft-title {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.3em;
    min-width: unset;
    max-width: unset;
    color: #15171A !important;
}

.kg-nft-opensea-logo {
    margin-top: 4px;
    width: 100px;
    object-fit: scale-down;
}

.kg-nft-creator {
    margin-top: 2px;
    color: #626D79;
    line-height: 1.4em;
}

.kg-nft-creator span {
    font-weight: 500;
    color: #15171A;
}

.kg-nft-card div + p {
    font-family: var(--font-family);
    font-size: 1.4rem;
    margin-top: 20px;
}

/* .kg-nft-card  */

/* Codemirror overrides
/* --------------------------------------------------------------- */
.koenig-editor .CodeMirror pre {
    font-size: 1.6rem;
    white-space: pre;
}

.koenig-editor .CodeMirror-wrap pre {
    white-space: pre-wrap;
}

.koenig-card-html--editor .CodeMirror {
    min-height: 170px;
    padding: 0;
    overflow: auto;
    background-color: #ffffff;
}

.koenig-card-code--editor .CodeMirror {
    background: color-mod(var(--whitegrey) lightness(+4%));
}

.koenig-card-html--editor .CodeMirror:hover {
    cursor: text;
}

.koenig-card-html--editor .CodeMirror-scroll {
    min-height: 170px;
    overflow: hidden !important;
    margin-right: 0;
}

.koenig-editor .gh-markdown-editor .CodeMirror {
    min-height: 130px;
    /* margin to account for absolutely positioned toolbar */
    margin-bottom: 49px;
}

.koenig-editor .gh-markdown-editor .CodeMirror-scroll {
    min-height: 130px;
}


/* 1.0 Markdown editor overrides
/* --------------------------------------------------------------- */
.koenig-editor .gh-markdown-editor {
    position: static;
    overflow: visible;
    padding-top: 2px;
}

.koenig-editor .gh-markdown-editor .editor-toolbar {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-left: none;
    border-right: none;
    border-radius: 0 0 .4rem .4rem;
    z-index: 9999;
    background-color: #fff;
    opacity: 1;
    padding: 6px;
    border-top: 1px solid #E5EFF5;
}

.koenig-editor .gh-markdown-editor .editor-toolbar .fa-check {
    margin-left: auto;
}

.koenig-editor .gh-markdown-editor .editor-toolbar .separator:last-of-type {
    display: none;
}


/* Special Koenig styles
/* --------------------------------------------------------------- */
.koenig-gallery-trash-icon {
    width: 16px;
    height: 16px;
}

.koenig-gallery-trash-icon path {
    fill: #15171A;
}


/* Mobiledoc-kit base styles
/* NOTE: adapted from https://github.com/bustle/mobiledoc-kit/blob/master/src/css/mobiledoc-kit.css
/* --------------------------------------------------------------- */

.__mobiledoc-editor {
    position: relative;
    resize: none;
    min-height: 1em;
}

.__mobiledoc-editor:focus {
    outline: none;
}

.__mobiledoc-editor > * {
    position: relative;
}

.__mobiledoc-editor i {
    display: inline;
}

.__mobiledoc-card {
    display: inline-block;
    width: 100%;
}

.__mobiledoc-editor.__has-no-content:after {
    min-width: 100%;
    content: attr(data-placeholder);
    cursor: text;
    position: absolute;
    top: 0;
    left: 0;
    color: var(--midlightgrey);
}