/*****************************************************************************
 * Open MCT, Copyright (c) 2014-2016, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is 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.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
.w-notebook {
    font-size: 0.8rem;
    overflow: hidden;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    width: auto;
    height: auto;
}

.notebook-view-controls.l-flex-row {
    > * {
        // filter and sort selects
        &:not(:first-child) { margin-left: $interiorMargin; }
    }
}

.l-notebook-drag-area {
    padding: 10px;
    font-style: italic;
    cursor: pointer;
    &:before { margin-right: 7px !important; }
    .label {
        @include ellipsize();
    }
}

.frame {
   .icon-notebook {
        margin-right: 5px;
    } 
}

.overlay.l-dialog .title{
    white-space: normal;
}

.w-notebook-entries {
    padding-right: $interiorMarginSm;
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
    .t-entries-list {
    }
}

.l-notebook-entry {
    $p: $interiorMarginSm;
    box-sizing: border-box;
    margin-bottom: $p;
    padding: $p $interiorMargin;

    .s-notebook-entry-time,
    .s-notebook-entry-text,
    .notebook-entry-delete {
        padding-top: $p;
        padding-bottom: $p;
    }

    .s-notebook-entry-time {
        border: 1px solid transparent; // Needed to maintain vertical alignment with s-notebook-entry-text
    }

    .l-notebook-entry-content{
        .s-notebook-entry-text {
            // Contenteditable div that holds text
            min-height: 24px; // Needed in Firefox when field is blank
            white-space: pre-wrap;
        }
        .entry-embeds{
            flex-wrap: wrap;
        }
        .snap-thumb {
            cursor: pointer;
        }
    }
}

.l-entry-embed {
    $m: $interiorMarginSm;
    position: relative;
    margin: $m $m 0 0;
    padding: $interiorMarginSm;

    &.has-snapshot {
        &:before {
            position: absolute;
            text-shadow: rgba(black, 0.7) 0 1px 5px;
            z-index: 2;
        }
    }
    .snap-thumb {
        $d: 50px;
        width: $d;
        height: $d;
        border-radius: 5px;
        overflow: hidden;
        img {
            height: 100%;
            width: 100%;
        }
    }

    .embed-info {
        margin-left: $interiorMargin;
        .embed-title {
            font-weight: bold;
        }
    }
}

.t-contents,
.snap-annotation {
    // Todo: don't write this to t-contents, add a l- class
    overflow: hidden;
}

.notebook-filters {
    .select {
        margin-left: $interiorMargin;
    }
}

.s-status-taking-snapshot,
.overlay.snapshot {
    // Handle overflow-y issues with tables and html2canvas
    .l-sticky-headers .l-tabular-body { overflow: auto; }
}


/********************************************* MOBILE */
body.mobile {
    // Hide the start entry area, and disable ability to edit or delete an entry in mobile context
    .l-notebook-drag-area {
        display: none;
    }

    .l-notebook-entry {
        pointer-events: none;
    }

    &.phone.portrait {
        .w-notebook-entry-time-and-content {
            flex-direction: column !important;
        }
        .s-notebook-entry-time,
        .notebook-entry-delete {
            padding-top: 0;
            padding-bottom: 0;
        }
    }
}

body.phone.portrait {
    .l-notebook-head.l-flex-row {
        flex-direction: column !important;
        > * {
            &:not(:first-child) { margin-top: $interiorMargin; }
        }
    }
}

/********************************************* PAINTERRO OVERRIDES */
.annotation-dialog .abs.editor {
    border-radius: 0;
}

#snap-annotation {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}

#snap-annotation-wrapper,
#snap-annotation-bar {
    position: relative;
    top: auto; right: auto; bottom: auto; left: auto;
}

#snap-annotation-wrapper {
    order: 2;
    flex: 10 0 auto;
}

#snap-annotation-bar {
    order: 1;
    flex: 0 0 auto;
    height: auto;
    background-color: transparent !important;
    margin-bottom: $interiorMargin;

    > div,
    > div > span,
    .ptro-icon-btn,
    .ptro-named-btn,
    .ptro-color-btn,
    .ptro-bordered-btn,
    .ptro-tool-ctl-name,
    .ptro-color-btn,
    .tool-controls,
    .ptro-input {
        // Lot of resets for crappy CSS in Painterro
        &:first-child {
            margin-left: 0 !important;
        }
        $h: $btnToolbarH;
        display: inline-block;
        font-family: inherit;
        font-size: auto;
        height: $h !important;
        margin: 0 0 0 5px;
        position: relative;
        width: auto !important;
        line-height: $h !important;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        vertical-align: top;
    }

    .ptro-tool-ctl-name {
        border-radius: 0;
        background: none;
        top: auto;
        font-family: inherit;
        padding: 0;
    }

    .ptro-color-btn {
        width: $btnToolbarH !important;
    }

    .ptro-icon-btn,
    .ptro-named-btn {
        // .s-button class is added via JS in AnnotateSnapshot.js
        // TODO: redo this so that we don't need to use Zepto and JS
        i {
            font-size: 1.25em !important;
        }
    }

    .tool-controls {
        font-size: 0.8rem !important;
    }

    .ptro-info,
    .ptro-btn-color-checkers-bar,
    *[title="Font name"],
    *[title="Stroke color"],
    *[title="Stroke width"],
    *[data-id="fontName"],
    *[data-id="fontStrokeSize"],
    *[data-id="stroke"] {
        display: none;
    }
}

/********************************************* NO IDEA WHAT THERE ARE APPLYING TO */
.context-available {
    outline: none;
}

.menu-element.menu-view{
    z-index: 999;
}

.overlay.l-dialog .abs.editor {
    padding-right: 0;
}