@import "koenig-toolbar.css";
@import "koenig-menu.css";
@import "../ghost-editor/cardmenu.css";

.editor-holder {
    height: 100%;
}
.gh-koenig {
    height: 100%;
    -webkit-overflow-scrolling: touch;
}

.__mobiledoc-editor {
    width: 100%;
    height: 100%;
    min-height: 300px;
    padding-bottom: 10vw;
    outline: none;
    font-family: var(--font-family);
    font-size: 1.7rem;
    resize: none;
    font-weight: 200;
    letter-spacing: 0.1px;
    -webkit-user-select: text;
    user-select: text;
    line-height: normal;
}

/*.__mobiledoc-editor *,
.__mobiledoc-editor *:before,
.__mobiledoc-editor *:after {
    box-sizing:unset;
}*/

.kg-card {
    position: relative;
    display: inline-block; /* even though we hide the cursors there is still a
                            zero width divider character on either side of this card,
                            we need them to sit inline around this block otherwise we have
                            a line at the top and bottom of the card. */
    width:100%;
    outline:none;
    user-select: none;
    cursor: pointer;
    z-index: 110; /* the title has a z-index of 100, this makes it sit above it. */
}

.kg-card * {
    user-select: none;
    cursor: pointer;
}

.kg-card .is-editing * {
    user-select: auto;
    cursor: auto;
}

.kg-card:hover,
.kg-card.selected {
    box-shadow: var(--blue) 0 0 0 1px;
}
.kg-card.selected-hard {
    box-shadow: var(--blue) 0 0 0 3px;
}
.kg-card .kg-card-toolbar {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 10px;
    width:100%;
    overflow: visible;
    display: none;
}
.button-group {
    color: color(var(--lightgrey) l(-10%));
    background: linear-gradient(
        color(var(--darkgrey) l(-3%)),
        color(var(--darkgrey) l(-8%))
    );
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-radius:5px;
    margin-top:-56px;
    height:46px;
    display:flex;
    box-shadow: 0 0 0 1px color(var(--darkgrey) l(-10%)), 0 8px 16px rgba(26,39,49,0.16), rgba(255,255,255,0.09) 0 1px 0 0 inset;
}

.button-group:after {
    display: block;
    content: "";
    position: absolute;
    bottom:11px;
    left: 50%;
    margin-left: -10px;

    width: 0;
    height: 0;
    border-left: transparent 10px solid;
    border-right: transparent 10px solid;
    border-top: color(var(--darkgrey) l(-10%)) 8px solid;
}

.kg-card {
    min-height: 100px;
}
.kg-card.selected .kg-card-toolbar {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    flex-flow: row wrap;
}

.kg-card .kg-card-toolbar label {
    flex-grow: 1;
    font-size: 1.3rem;
    line-height: 46px;
    text-align:center;
    justify-content: center;
    vertical-align: middle;
    font-weight: bold;
    padding:0 18px;
}


.kg-card .kg-card-toolbar button {
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    height: 46px;
    min-width: 32px;
    font-size: 1.6rem;
    line-height: 30px;
    padding:0 5px 0 5px;
    transition: text-shadow 0.3s ease;
}
.kg-card .kg-card-toolbar button.kg-card-button-text {
    font-size: 1.3rem;
    line-height: 46px;
    width:70px;
    text-align:center;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    padding:0;
}
.kg-card .kg-card-toolbar button.kg-card-button-save {
    font-size: 1.3rem;
    line-height: 30px;
    height:30px;
    width:60px;
    text-align:center;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    margin:8px;

    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.1);
    fill: #fff;
    background: linear-gradient( rgb(61, 161, 214), rgb(34, 136, 191) );
    box-shadow: 0 1px 0 rgba(0,0,0,0.12);
    border-radius:5px;
}
.kg-card .kg-card-toolbar button.kg-card-delete {
    text-transform: none !important;
    /*font-family: "ghosticons" !important;*/
    font-size: 1rem;
    line-height: 1;
    font-weight: normal !important;
    font-style: normal !important;
    font-variant: normal !important;
}

.kg-card textarea {
    min-height: 333px;
    max-width: 900px;
    outline: none;
    border: none;
    resize: none;

}

.kg-card-toolbar button:hover {
    background-color: #718087;
    color: #fff;
}



textarea.ed_code {
    width: 100%;
    height: 100%;
    border: none;
}

.dragOver {
    background-color: var(--lightgrey);
}



/**
 * Tooltip
 */
@keyframes tooltip-fadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.__mobiledoc-tooltip {
    white-space: nowrap;
    position: absolute;
    background-color: #5ba4e5;
    border-radius: 3px;
    padding: 5px 10px 5px 10px;
    color: #FFF;
    -webkit-animation: tooltip-fadein 0.333s;
    animation: tooltip-fadein 0.333s;
}
.__mobiledoc-tooltip a {
    color: #FFF;
}
.__mobiledoc-tooltip:before {
    content: '';
    position: absolute;

    left: 50%;
    top: -9px;

    margin-left: -10px;

    border-bottom: 10px solid #5ba4e5;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}


.kg-card .gh-image-uploader .upload-form {
    width: 100%;
    height: 350px;
    background: color(var(--lightgrey) l(+4%));
    box-shadow: var(--lightgrey) 0 0 0 1px inset, #fff 0 0 0 15px inset;
    border-radius: 3px;
}

/* markdown card */
.kg-card-markdown textarea {
    resize: vertical;
}