/*
 * 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.
 *
 */

// Default style for LayerFace components
.face {
    min-height: 2.8rem;
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 2.8rem;
    position: relative;
    padding-left: 1rem;
    padding-right: 1rem;
}

.layer__dummy {
    min-height: 2.5rem;
    max-height: 2.5rem;
    cursor: default;
}

.layer__dummy_drop {
    border-top: .25rem inset @focus-highlight;
}

.face__separator {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    height: 3rem;
    padding-left: 0.4rem;
    flex-grow: 10;
    flex-shrink: 100;
    box-sizing: border-box;

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

.generate-depth(@n, @i: 0) when (@i =< @n) {
  .face__depth-@{i} {
    padding-left: (@i * 1.8rem)+1;
  }
  .generate-depth(@n, (@i + 1));
}

.generate-depth(10);

.face__name {
    flex-grow: 1;
    flex-shrink: 1;
    -webkit-user-select: none;
    white-space: pre;
    text-overflow: ellipsis;
    overflow-x: hidden;
    height: 2rem;
    padding: 0.4rem 0;
}

input[type="text"].face__name {
    font-size: 1.2rem;
    color: @item;
    margin-top: -0.2rem;
    width: 100%;
    border-bottom: solid @hairline @focus-highlight;
    -webkit-user-select: text;
}

.face:hover {
    background-color: @list-hover-color;
    
    .face__name {
        color: @item-hover;
    }
}

// Layer group selection state
.layer__selected + .layer-group {
    .face, .face:hover {
        background-color: @list-select-child-color;
    }
}

// Layer direct selection state
.face__selected,
.layer__selected + .layer-group .face__selected {
    &, &:hover {
        background-color: @list-select-color;
    }

    .face__name, 
    &:hover .face__name {
        color: @item;
    }
}

// Layer visibility state
.layer__not-visible,
.layer__not-visible + .layer-group {
    .face__name {
        color: @item-hover;
        opacity: @label-hidden-opacity;
    }
}

// Layer Group collapsed state
.layer__collapsed + .layer-group{
    display: none;
}

// Drop state
.face__drop_target, .face__drop_target:hover {
    background-color: none;
    cursor: -webkit-grabbing;
}

.face__drop_target_above:before {
    content: "";
    position: absolute;
    height: 2*@hairline*1rem;
    left: 0;
    top: 0.25/2 * 1rem;
    width: 100%;
    background: @focus-highlight;
}

.face__drop_target_below:before {
    content: "";
    position: absolute;
    height: 2*@hairline*1rem;
    left: 0;
    top: 100%;
    width: 100%;
    background: @focus-highlight;
    margin-top: @hairline;
}

.face__drop_target_on {
    box-shadow: inset 0px 0px 0px .25rem @focus-highlight;
}

// Drag state
.face__drag-target {
    background-color: none;
    opacity: 0.5;
    position: fixed;
    margin-left: 0;
    width: @panel-column-width;
    z-index: 1;
    pointer-events: none;
}

.layer__drag-target {
    padding-top: 2.8rem;
}

// Fix Chrome's rendering bug when layer's height has decimal. 
// The updated number is the nearest pixel to the original.
// 
// For non-retina @base-8, retina @base-8/@base-9
@media (-webkit-min-device-pixel-ratio: 1) and (min-device-width: 801px) and (max-device-width: 1440px),
(-webkit-min-device-pixel-ratio: 2) and (min-device-width: 801px) and (max-device-width: 1680px) {
    .face {
        height: 25px; // from 25.1875px to 25px
        min-height: 25px;
    }
    
    input[type="text"].face__name {
        margin-top: -1px;
    }
}
// For retina @base-11
@media (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 2561px) {
    .face {
        height: 31px; // from 30.815px to 31px
        min-height: 31px;
    }
    
    input[type="text"].face__name {
        margin-top: -3px;
    }
}
