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

@panel-column-width: 32rem;
@properties-padding: 1.6rem;
@toolbar-width: 3rem;
@panel-border-width: 0.2rem;

/* -- PROPERTIES -- */
.panel-set {
    height: 100%;
    max-height: 100%;
    display: flex;
    box-shadow: inset @panel-border-width 0 0 @bg-border-for-canvas;
}

.panel-section {
    display: flex;
    flex-shrink: 1;
    flex-grow: 1;
}

.panel-transform-section, .panel-appearance-section {
    flex-shrink: 0;
    flex-grow: 0;
}

.panel-appearance-section .section-container .stroke {
    margin-top: .4rem;
}

.panel-layers-section, .panel-libraries-section {
    min-height: 50%;
}

.panel-section__collapsed {
    min-height: 4.6rem;
    height: 4.6rem;
    flex-grow: 0;
}

.panel-appearance-section, .panel-effects-section {
    &.panel-section__no-selected-layer {
        flex-grow: 0;
        height: auto;
        min-height: 0;
    }
}

.panel-section__not-visible {
    display: none;
}

.panel-set__container {
    height: 100%;
    max-height: 100%;
    display: flex;
}

.panel-set__not-visible {
    display: none;
}

.panel__tab-bar__visible {
    display: block;
}

.panel__tab-bar {
    background-color: @bg-panel;
    width: @toolbar-button-size + 0.2rem;
    box-shadow: inset 0 (@panel-border-width) 0 @bg-border, inset (-1*@hairline) @hairline 0 @bg-border;
    display: none;
    z-index: 1;
}

.panel__tab-bar__visible {
    display: block;
}

.panel__tab-bar .button-simple {
    width: @toolbar-button-size;
    height: @toolbar-button-size;
}

.panel {
    height: 100%;
    max-height: 100%;
    width: @panel-column-width;
    background-color: @bg-panel;
    box-shadow: inset 0 (0.2rem) 0 @bg-border;
    border-right: @panel-border-width solid @bg-border;
    z-index: 1;
    display: none;
    position: relative;
    flex-direction: column;
}

.panel__visible + .panel:nth-child(2) {
    border-right: @panel-border-width solid @bg-border;
}

.panel__visible {
    display: flex;
}

.properties {
    height: 100%;
    width: @panel-column-width;
    overflow: hidden;
    min-height: 100%;
    flex-direction: column;
    justify-content: flex-start;
    flex-wrap: nowrap;
    align-items: stretch;
    flex-shrink: 0;
    display: none;
}

.properties__active {
    display: flex;
}

.formline {
    display: flex;
    align-items: center;
    padding-top: 0.8rem;
    padding-bottom: 0.9rem;
    width: @panel-column-width - 2*@properties-padding;
}

.formline__no-padding {
    padding-bottom: 0.1rem;    
}

.formline:first-child {
    padding-top: 0;
}

.formline__padded-first-child:first-child {
    padding-top: 0.8rem;
}

.formline__bottom-align {
    align-items: flex-end;
}

.formline__space-between {
    justify-content: space-between;
}

.section {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex-shrink: 1;
    border-bottom: @panel-border-width solid @bg-border;
    
    &.export {
        border-bottom: 0;
    }
}

.section.section__collapsed {
    flex-grow: 0;
    height: auto;
    border-bottom: @panel-border-width solid @bg-border;
}

.transform.section,
.section-header {
    padding: 0 @properties-padding;
}

.recent-files {
    flex-shrink: 1;
}

.artboard-launcher .section-container {
   flex-shrink: 0;
}

.layers .section-container {
    padding: 0;
    flex-shrink: 1;
}

.section-container, .section-container__no-collapse {
    overflow-x: hidden;
    overflow-y: auto;
    flex-grow: 1;
    flex-shrink: 1;
    padding: 0.5rem 0;
    display: flex;
    align-items: initial;
    opacity: 0;
}

.section-container__collapsed {
    display: none;
}

.layer-count {
    opacity: 0;
}

.artboard-presets, .recent-files {
    flex-grow: 1;
}

.artboard-presets .section-container,
.recent-files .section-container {
    padding: 0;
}

.recent-files .section-container {
    padding-bottom: 1rem;
    flex-shrink: 1;
}

.effects.section__collapsed,
.export.section__collapsed {
    min-height: 4.8rem;
}

.appearance, 
.type, 
.effects, 
.export {
    .section-container {
        padding: 0 @properties-padding;
    }
}

.effects {
    .section-container {
        > div {
            width: 100%;
        }
    }
}

.libraries .section-container {
    padding: 0 @properties-padding;
}

.appearance {
    flex-shrink: 0;
}

.radius_input .control-group__vertical {
    margin-left: .2rem;
}

.radius_input {
    padding-bottom: 2rem;
}

.last-line__type {
    padding-bottom: 2rem;
}

.transform.section {
    flex-grow: 0;
    flex-shrink: 0;
    
    padding: 0;
    
    .section-header {
        box-sizing: content-box;
        padding: 0 @properties-padding;
        border-bottom: @panel-border-width solid @bg-border;
    }
}

.transform__body {
    padding: 1rem @properties-padding;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .control-group:first-child .control-group__horizontal label:first-child{
        margin-left: 1rem;
    }
}

.layers {
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
}

.generate-columns(@panel-column-width);

.generate-columns(@n, @i: 1) when (@i =< @n) {
    .column-@{i} {
        width: ~"@{i}rem";
        flex-shrink: 0;
    }
    .generate-columns(@n, (@i + 1));
}

.column-full {
    width: 28.8rem;
}

.column-half {
    width: 0.5rem;
}

.panel__info {
    flex-shrink: 1;
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 1rem;
    text-align: center;
    line-height: 1.8rem;
    margin: 0 @properties-padding;
    color: @item-inactive;

    div {
        margin-bottom: 1rem;
    }
    &__title {
        color: @item-inactive;
    }
    &__link a {
        color: @item-inactive;
    }
}

.dialog-effects-popover,
.dialog-export-popover,{
    overflow: visible;
}

.workflow-buttons{
    display: flex;
    flex-direction: row;
    align-items: center;
    
    .button-simple {
        &:not(:first-child) {
            margin-left: 0.4rem;
        }
        
        &-plus:not(:first-child) {
            margin-left: 0.4rem;
        }

        &-iOS {
            width: 2.4rem;
            margin-left: .4rem;
        }

        &-xdpi {
            width: 2.8rem;
            margin-left: .4rem;
            margin-right: .4rem;
        }
    }
}

.popover-list {
    width: 100%;
    
    &:before {
        .dialog-pointer(5.4rem, true);
    }
}

.popover-list__item {
    padding: 0.8rem;
    border-left: 0.2rem solid transparent;
    padding: 0.8rem 0.8rem 0.8rem 0.6rem;
    
    &:hover {
        color: @text-focus;
        border-left: 0.2rem solid @focus-highlight;
    }
    
    &-disabled, &-disabled:hover {
        color: @item-disabled;
    }
    
     &:first-child{
        border-radius: .4rem 0 0 0;
    }
    
    &:last-child{
        border-radius: 0 0 0 .4rem;
    }
}

.label__medium.column-4.label__medium__left-aligned.opacity-label {
    margin-top: .2rem;
}

.panel-set__small-screen {
    .panel {
        border-right: @hairline solid @bg-border;
    }
    
    .export, .layers {
        border-bottom: @panel-border-width solid @bg-border;
    }

    .section.section__collapsed {
        flex-grow: 0;
        flex-shrink: 0;
        height: auto;
        border-bottom: @panel-border-width solid @bg-border;
    }

    .panel-libraries-section, .panel-layers-section {
        flex-grow: 1;
        flex-basis: 20rem;
    }

    .panel-export-section, .panel-effects-section {
        max-height: 15%;
        flex-grow: 0;
        min-height: 0;
        
        &.section__expand {
            height: auto;
        }
    }
    
    .panel-libraries-section, .panel-layers-section {
        min-height: 0;
    }

    .layers, .libraries, .export, .effects {
        min-height: 0;
        
        &.section__collapsed {
            min-height: 3.2rem;
            flex-grow: 1;
            flex-basis: 0;
        }
    }

    .panel-layers-section,
    .panel-export-section, .panel-effects-section, 
    .panel-appearance-section {
        min-height: 4.6rem;
        overflow: hidden;
    }

    .appearance, .type {
        height: 18rem;
        flex-grow: 0;
    }
    
    .panel-section__collapsed {
        flex-grow: 0;
        flex-basis: auto;
        min-height: 3.2rem;
        height: 3.2rem;
    }
    
    .panel-appearance-section, .panel-effects-section {
        &.panel-section__no-selected-layer {
            flex-grow: 0;
            height: auto;
            min-height: 0;
        }
    }
}

// LANGUAGE SPECIFIC STYLES //

/**** JAPANESE *****/

:lang(ja) .label__medium.column-4.label__medium__left-aligned.opacity-label {
   width: 5rem;
}

:lang(ja) .label__medium.column-2.blur-label {
    width: 3.8rem;
}

:lang(ja) .label__medium.column-4.spread-label {
    width: 7rem;
}

:lang(ja) .label__medium__left-aligned.scale-title {
    width: 7rem;
}

:lang(ja) .effect-list__container .section-title__subtitle {
    display: block;
}

:lang(ja) .stroke-alignment-buttons {
    width: 11rem;
}

:lang(ja) .effect-list__stroke .label__medium.column-3 {
    width: 4rem;
}

/**** GERMAN *****/

:lang(de) .label__medium.column-2.blur-label {
    width: 5rem;
}

:lang(de) .label__medium.column-4.spread-label {
    width: 5rem;
}
