/* Toolbar icon */
#markdown-preview-icon {
    background-image: url(images/markdown-sprite.svg);
}

#markdown-preview-icon.active {
    background-position: 0 -24px !important;
}

#panel-markdown-preview {
    position: relative;
    background-color: #fff;
}

#panel-markdown-preview-frame {
    border: none;
}

#markdown-settings-toggle {
    position: absolute;
    cursor: pointer;
    top: 8px;
    right: 21px;
    width: 20px;
    height: 20px;
    background-image: url(images/gear.svg);
    background-size: contain;
    padding: 0;
    opacity: 0.05;
    transition-property: opacity;
    transition-duration: .2s;
    -webkit-filter: drop-shadow(0 0 2px #fff);
    filter: drop-shadow(0 0 1px #fff);
    display: none;
}

#panel-markdown-preview:hover #markdown-settings-toggle {
    opacity: 0.8;
}

#markdown-settings-panel {
    position: absolute;
    z-index: 20000;
    padding: 15px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 10px #ccc;
}

#markdown-settings-panel:before {
    border-top: 15px solid transparent;
    border-right: 15px solid rgba(0, 0, 0, 0.1);
    top: -8px;
    content: '';
    position: absolute;
    right: 10px;
    -webkit-transform:rotate(225deg);
}

#markdown-settings-panel:after {
    border-top: 15px solid transparent;
    border-right: 15px solid #fff;
    top: -7px;
    content: '';
    position: absolute;
    right: 10px;
    -webkit-transform:rotate(225deg);
}

.md-settings-row {
    padding-top: 5px;
}

.md-settings-label {
    display: inline-block;
    text-align: right;
    width: 55px;
    height: 27px;
    padding-right: 10px;
    vertical-align: middle;
}

#markdown-settings-panel label {
    display: inline-block;
}

#markdown-settings-panel input {
    margin-right: 10px;
}