/**
* Copyright JS Foundation and other contributors, http://js.foundation
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
**/


body {
    overflow: hidden;
}

.red-ui-editor {
    font-size: var(--red-ui-primary-font-size);
    font-family: var(--red-ui-primary-font);
    padding: 0;
    margin: 0;
    background: var(--red-ui-primary-background);
    color: var(--red-ui-primary-text-color);
    line-height: 20px;
}

#red-ui-editor {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}
#red-ui-editor-node-configs {
    display: none;
}
#red-ui-main-container {
    position: absolute;
    top:40px; left:0; bottom: 0; right:0;
    overflow:hidden;
}

#red-ui-palette-shade, #red-ui-editor-shade, #red-ui-header-shade, #red-ui-sidebar-shade  {
    @include shade;
    z-index: 5;
}
#red-ui-sidebar-shade  {
    left: -8px;
    top: -1px;
    bottom: -1px;
}
#red-ui-full-shade {
    @include shade;
    z-index: 15;
}
.red-ui-editor,
.red-ui-editor-dialog,
.red-ui-menu,
.red-ui-popover,
.red-ui-typedInput-options,
.red-ui-icon-picker {
    a {
        text-decoration: none;
        color: var(--red-ui-primary-text-color);
    }
    a:hover,
    a:focus {
        text-decoration: none;
        color: var(--red-ui-primary-text-color);
    }
    a:focus {
        outline: 1px solid var(--red-ui-form-input-focus-color);
    }

    p {
        margin: 0 0 10px;
    }

    small {
        font-size: 85%;
    }

    strong {
        font-weight: bold;
    }

    em {
        font-style: italic;
    }

    cite {
        font-style: normal;
    }

    ul,
    ol {
        padding: 0;
        margin: 0 0 10px 25px;
    }

    ul ul,
    ul ol,
    ol ol,
    ol ul {
        margin-bottom: 0;
    }

    li {
        line-height: 20px;
    }
    dl {
        margin-bottom: 20px;
    }

    dt,
    dd {
        line-height: 20px;
    }

    dt {
        font-weight: bold;
    }

    dd {
        margin-left: 10px;
    }

    hr {
        margin: 20px 0;
        border: 0;
        border-top: 1px solid var(--red-ui-tertiary-border-color);
    }



    i.spinner {
        display: inline-block;
        width: 14px;
        height: 14px;
        line-height: 14px;
        vertical-align: text-top;
        margin-top: 0px;
        -webkit-mask-image: url(images/spin.svg);
        mask-image: url(images/spin.svg);
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-position: 50% 50%;
        mask-position: 50% 50%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        background-color: var(--red-ui-spinner-color);
        }

    .red-ui-font-code {
        font-family: var(--red-ui-monospace-font);
        font-size: var(--red-ui-primary-font-size);
        color: var(--red-ui-text-color-code);
        white-space: nowrap;
    }

    code {
        font-family: var(--red-ui-monospace-font);
        font-size: var(--red-ui-primary-font-size);
        padding: 0px;
        margin: 1px;
        color: var(--red-ui-text-color-code);
        white-space: nowrap;
    }

    pre {
        display: block;
        padding: 9.5px;
        margin: 0 0 10px;
        line-height: 20px;
        word-break: break-all;
        word-wrap: break-word;
        white-space: pre-wrap;
        background-color:var(--red-ui-tertiary-background);
        border: 1px solid var(--red-ui-tertiary-border-color);
        border-radius: 2px;
    }

    pre code {
        padding: 0;
        color: inherit;
        white-space: pre;
        white-space: pre-wrap;
        background-color: transparent;
        border: 0;
    }

    .pull-right {
        float: right;
    }

    .pull-left {
        float: left;
    }
    .hide {
        display: none;
    }
    .show {
        display: block;
    }

    img {
        width: auto\9;
        height: auto;
        max-width: 100%;
        vertical-align: middle;
        border: 0;
        -ms-interpolation-mode: bicubic;
    }

    blockquote {
        padding: 0 0 0 15px;
        margin: 0 0 20px;
        border-left: 4px solid var(--red-ui-secondary-border-color);
        color: var(--red-ui-secondary-text-color);

        p {
            font-size: 14px;
            font-weight: inherit;
            line-height: 1.25;
            margin-bottom: 0;
        }
    }

    table {
        max-width: 100%;
        background-color: transparent;
        border-collapse: collapse;
        border-spacing: 0;
    }
}

.red-ui-component-spinner {
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 1px;
    right: 1px;
    text-align: center;
    padding: 40px;
    background: var(--red-ui-secondary-background);
    &:before {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
      margin-right: -0.25em;
    }
    img {
        display: inline-block;
        vertical-align: middle;
        width: 80px;
    }
    &.red-ui-component-spinner-sidebar {
        background: var(--red-ui-secondary-background);
        padding:0;
        img {
            width: 40px;
        }
    }
    &.projects-version-control-spinner-sidebar {
        background: var(--red-ui-secondary-background);
        padding:0;
        img {
            width: 20px;
        }
    }

    &.red-ui-component-spinner-contain {
        padding: 0;
        img {
            width: auto;
            height: 100%;
            max-height: 50px;
        }
    }
}