@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;
}

.kg-card {
    position: relative;
    display: block; 
    padding: 10px;
    outline:none;
}

.kg-card:hover, .kg-card.selected {
    box-shadow: var(--blue) 0 0 0 1px;
    border-radius:10px;
}
.kg-card.selected-hard {
    box-shadow: var(--blue) 0 0 0 3px;
}
.kg-card .kg-card-toolbar {
    position: absolute;
    left: 0px;
    top: 0px;
    margin-top: -56px;
    height: 46px;
    width:100%;
    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;
    
    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;
}

/* keeps the hover when the cursor is moving from the card to the toolbar */
.button-group:before {
    display: block;
    content: "";
    position: absolute;
    bottom:-9px;
    width: 100%;
    height: 8px;
}

.button-group:after {
    display: block;
    content: "";
    position: absolute;
    bottom:-9px;
    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:hover .kg-card-toolbar, .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;
    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;
    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;
    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;
}



/**
 * 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;
}


/**
 * HTML Card
 */

 .kg-card-html {
     border: #ddd 1px solid;
 }