/*
 * Copyright (c) 2014 Adobe Systems Incorporated. All rights reserved.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a
 * copy of this software and associated documentation files (the "Software"),
 * to deal in the Software without restriction, including without limitation
 * the rights to use, copy, modify, merge, publish, distribute, sublicense,
 * and/or sell copies of the Software, and to permit persons to whom the
 * Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
 * DEALINGS IN THE SOFTWARE.
 *
 */

@graphic-drag-preview-size: 3.6rem;
@libraries-button-size: 1.6rem;
@libraries-preview-height: 3.8rem;
@libraries-preview-width: 5.4rem;

.libraries {
    position: relative;
    flex-grow: 1;
    flex-shrink: 0;
    width: 100%;
    border-bottom: none;

    .section-container {
        padding: 0;
        overflow-y: hidden;
    }

    .split-button__item {
        width: @libraries-button-size;
        flex-grow: 0;
        flex-shrink: 0;
        svg {
            width: @libraries-button-size;
            height: @libraries-button-size;
        }
    }

    .section-container {
        flex-basis: 17.5rem;
    }

    .assets__graphic__dragging {
        opacity: .7;
    }

    .libraries-bar {
        ul {
            flex-grow: 0;
            .split-button__item__color-icon {
                width: @libraries-button-size;
                height: @libraries-button-size;
                border: @hairline solid @item-active;
                border-radius: .1rem;
                position: relative;
                
                &:before {
                    content: "";
                    position: absolute;
                    top: -0rem;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: @item;
                    .background-checkerboard(14.5);
                    z-index: -1;
                }
                
                &:hover {
                    border: @hairline solid @item-hover;
                }
            }
        }
    }

    &__container {
        justify-content: space-between;
        flex-direction: column;
    }

    &__bar__top {
        &__content {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            flex: none;
            height: 3.2rem;
            margin: 0 0rem;
            align-items: center;
            width: 100%;
        }

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex: none;
        height: 4.4rem;
        padding-bottom: 1.2rem;
        margin: 0 1.6rem;
        align-items: center;
        
        .drop-down {
            flex-grow: 1;
            width: 18.4rem;
            
            input {
                width: 100%;
            }
        }

        .libraries__split-button-list {
            flex: none;
            flex-shrink: 0;
            flex-grow: 0;
            width: auto;
            justify-content: space-between;

            .split-button__item {
                justify-content: flex-end;
                margin: 0;
                margin-left: 1.5rem;
            }

            .libraries__split-button-collaborate {
                svg {
                    fill: @focus-highlight;
                }
            }
        }

        .libraries__bar__btn-cancel, .libraries__bar__btn-confirm {
            width: 6rem;
            flex-shrink: 0;
            text-align: center;
            font-size: @text-medium;
            padding-top: 1rem;
            padding-bottom: 1rem;
            color: @item-active;
            
            &:hover {
                color: @item-hover;
            }
        }

        .libraries__bar__btn-confirm {
            color: @item-hover;
            font-weight: 500;
            &:hover {
                color: @item;
            }
        }

        .libraries__bar__input {
            font-size: @text-medium;
            flex-grow: 1;
            color: @item-hover;
            
            &::-webkit-input-placeholder {
               color: @item-disabled;
            }
        }
    }

    &__bar__bottom {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        flex: none;
        height: @toolbar-button-size;
        margin: 0 1.6rem;

        .libraries-bar__section__left {
            flex: none;

            .split-button__item {
                margin-right: 1.5rem;
            }
        }

        .libraries-bar__section__right {
            flex: none;
            justify-content: space-between;

            .split-button__item {
                justify-content: flex-end;
                margin: 0;
                margin-left: 1.5rem;
            }
        }
    }

    &__content {
        height: 5.4rem;
        flex-grow: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding-left: 1.6rem;
        
        &-drag {
            overflow-y: hidden;
        }
        
        &__hidden {
            display: none;
        }
    }

    &__drop-overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background-color: rgba(0, 0, 0, .2);
        z-index: 1;
        cursor: copy;
    }

    &__drop-overlay__disallow {
        cursor: not-allowed;
    }

    &__assets {
        &:last-child {
            padding-bottom: 2rem;
        }

        &__title {
            padding: 1rem 1.6rem .5rem 1.6rem;
            color: @item-inactive;
        }
    }

    &__asset {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: .3rem 0;
        padding-left: 0rem;
        -webkit-user-select: none;
        cursor: pointer;

        &:hover {
            background-color: @list-hover-color;
            
             input[type="text"], input[type="text"]:disabled {
                color: @item-hover;
            }
        }
        
        &-selected, &-selected:hover, &-selected:hover:disabled {
            background-color: @list-select-color;
            padding-right: 0;
        }

        &__preview {
            width: @libraries-preview-width;
            height: @libraries-preview-height;
            margin-right: 1rem;
        }

        &__title {
            display: flex;
            flex-grow: 100;
            flex-shrink: 1;
            flex-direction: column;
            justify-content: center;
            height: @libraries-preview-height;

            // The following ensures that the face__name is correctly truncated.
            // See: http://codepen.io/aj-foster/pen/emBYPW
            min-width: 0;

            &__main {
                line-height: 2rem;
                height: 2rem;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                margin-right: 0.5rem;
                margin-top: -@hairline;
                white-space: pre;
            }

            input[type="text"] {
                font-size: @text-small;
                color: @item;
                -webkit-user-select: none;
                padding: 0;
                margin-right: 0.5rem;
                border-bottom: @hairline solid @focus-highlight;
            }
        }

        &__subtitle {
            margin-top: .3rem;
            margin-right: 0.5rem;
            padding-bottom: .3rem;
            font-size: 1rem;
            color: @mid-bg-alt;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        &__preview-character-style, &__preview-layer-style, &__preview-graphic {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        &__preview-image {
            width: @libraries-preview-height;
            height: @libraries-preview-height;
            background-size: 3.6rem;
            background-repeat: no-repeat;
            background-position: center;
            display: flex;
            justify-content: center;
            align-items: center;
            
            img {
                max-width: 3.6rem;
                max-height: 3.6rem;
            }
            
            &-loading {
                width: 1.6rem;
                height: 1.6rem;
                
                svg {
                    width: 1.6rem;
                    height: 1.6rem;
                }
            }
            
            &-blank {
                width: 100%;
                height: 100%;
                background-color: @item;
                background-image: url("img/ico-libraries-cc.svg");
                background-size: 2rem 2rem;
            }
        }

        &__preview-character-style {
            background-color: @color-preview-background;
            position: relative;

            &__color-swatch {
                position: absolute;
                top: .3rem;
                right: .3rem;
                height: .6rem;
                width: 1rem;
            }
        }

        &__preview-layer-style {
            background-color: @layer-style-preview-background;
        }

        &__preview-graphic {
            background-color: @item;
            .background-checkerboard();
        }

        &__preview-colortheme {
            display: flex;
            flex-direction: row;
            transition: width 100ms ease-out;

            > div {
                height: 100%;
                width: 20%;
            }

            &:hover {
                width: @libraries-preview-width * 2;
            }
        }

        &__buttons {
            flex-shrink: 1;

            .split-button__item {
                justify-content: flex-start;
                margin: 0;
                margin-left: 0.8rem;
                margin-right: 0.8rem;
            }
        }
    }

    &__asset-brush {
        color: @mid-bg-alt;
        font-style: italic;
        padding: .3rem 1.6rem;
        line-height: 1.3rem;
    }

    &__dialog {
        position: absolute;
        top: 0;
        left: 0;
        width: 32rem;
        padding: 1.5rem 1.6rem;
        background-color: rgba(10, 10, 10, .7);
        z-index: 10;

        &-wrapper {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            padding: 1.5rem 0;
            border: @hairline solid @bg-border;
            border-radius: 0.4rem;
            background-color: @bg-panel;
        }

        &__title {
            width: 23rem;
            color: @item-hover;
            font-size: 1.8rem;
            line-height: 1.8rem;
            padding-bottom: 1.5rem;
            border-bottom: @hairline solid @underlines;
            font-weight: 500;
        }

        &__body {
            width: 100%;
            color: @item-active;
            font-size: @text-medium;
            line-height: 2rem;
            padding: 1rem 2.5rem;
        }

        &__btn-cancel, &__btn-confirm {
            flex-grow: 1;
            line-height: 2.5rem;
            font-size: @text-medium;
            text-align: center;
            &:hover {
                color: @item-hover;
            }
        }

        &__btn-confirm {
            font-weight: 500;
            color: @item-hover;
            &:hover {
                color: @item;
            }
        }

        &__btn-cancel {
            border-right: @hairline solid @underlines;
        }
    }

} // .libraries

.assets__graphic__drag-preview {
    position: fixed;
    width: @graphic-drag-preview-size;
    height: @graphic-drag-preview-size;
    line-height: @graphic-drag-preview-size;
    text-align: center;
    margin-top: -@graphic-drag-preview-size/2;
    margin-left: -@graphic-drag-preview-size/2;
    pointer-events: none;

    img {
        max-width: @graphic-drag-preview-size;
        max-height: @graphic-drag-preview-size;
        vertical-align: middle;
    }
}

// Fix Chrome's rendering bug when asset has fractional pixel. 
// The updated height is rounded to the nearest pixel.
// TODO find better way to handle fractional pixel.
// 
// For non-retina @base-8
@media (-webkit-min-device-pixel-ratio: 1) and (min-device-width: 801px) and (max-device-width: 1440px){
    .libraries__asset__preview, .libraries__asset__title {
        height: 34px;
    }
    .libraries__asset {
        padding: 3px 0;
    }
    .libraries__asset__title__main {
        margin-top: 0;
    }
}
// For retina @base-8/@base-9
@media (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 801px) and (max-device-width: 1680px) {
    .libraries__asset__preview, .libraries__asset__title {
        height: 34px;
    }
    .libraries__asset {
        padding: 3px 0;
    }
}
// For retina @base-11
@media (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 2561px) {
    .libraries__asset__preview, .libraries__asset__title {
        height: 42px;
    }
    .libraries__asset {
        padding: 3px 0;
    }
}
