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

@import "./reset.less";
@import "./shared/colors-shared.less";

html {
    height: 100%;
    font-size: @base-10;
}

body {
    font-family: "Adobe Clean";
    font-weight: normal;
    text-rendering: geometricPrecision;
    height: 100%;
    -webkit-font-feature-settings: "calt", "liga", "clig", "kern", "tnum";
    font-size: 1.2rem;
}

input {
    font-weight: normal;
    font-family: "Adobe Clean";
    text-rendering: geometricPrecision;
    -webkit-font-feature-settings: "calt", "liga", "clig", "kern", "tnum";
}

.hide {
    display: none;
}

@font-face {
  font-family: 'Adobe Clean';
  src: url('file://shared/font/AdobeClean-Regular.otf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Adobe Clean';
  src: url('file://shared/font/AdobeClean-It.otf');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Adobe Clean';
  src: url('file://shared/font/AdobeClean-Light.otf');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Adobe Clean';
  src: url('file://shared/font/AdobeClean-LightIt.otf');
  font-weight: 200;
  font-style: italic;
}

@font-face {
  font-family: 'Adobe Clean';
  src: url('file://shared/font/AdobeClean-BoldSemiCn.otf');
  font-weight: 500;
  font-style: normal;
}

@hairline: 1px;
@base-8: 50%; // 1rem = 8px
@base-9: 56.3%; // 1rem = 9px
@base-10: 62.5%; // 1rem = 10px
@base-11: 68.8%; // 1rem = 11px
@base-12: 75%; // 1rem = 12px
@text-wee: 1rem;
@text-small: 1.2rem;
@text-medium: 1.4rem;
@text-large: 1.6rem;
@text-xxlarge: 2.0rem;

// Standard def displays
@media (-webkit-min-device-pixel-ratio: 1) and (min-device-width: 801px) and (max-device-width: 1280px) {
    html { font-size: @base-8; }
}

@media (-webkit-min-device-pixel-ratio: 1) and (min-device-width: 1281px) and (max-device-width: 1440px) {
    html { font-size: @base-8; }
}

@media (-webkit-min-device-pixel-ratio: 1) and (min-device-width: 1441px) and (max-device-width: 1680px) {
    html { font-size: @base-10; }
}

@media (-webkit-min-device-pixel-ratio: 1) and (min-device-width: 1681px) {
    html { font-size: @base-10; }
}

// Retina displays
@media (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 801px) and (max-device-width: 1280px) {
    html { font-size: @base-8; }
}

@media (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 1281px) and (max-device-width: 1440px) {
    html { font-size: @base-8; }
}

@media (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 1441px) and (max-device-width: 1680px) {
    html { font-size: @base-9; }
}

@media (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 1681px) and (max-device-width: 2560px) {
    html { font-size: @base-10; }
}

@media (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 2561px) {
    html { font-size: @base-11; }
}

@media (min-height: 200px) {
  .main__both-panel .panel-export-section, .main__both-panel .panel-effects-section {
    min-height: 0rem;
    overflow: hidden;
  }

  .main__both-panel .panel-appearance-section {
    height: 6rem;
    overflow: hidden;
  }
}

@media (min-height: 300px) {
  .main__both-panel .panel-export-section, .main__both-panel .panel-effects-section {
    min-height: 0rem;
    overflow: hidden;
  }

  .main__both-panel .panel-appearance-section {
    height: 8rem;
    overflow: hidden;
  }
}

@media (min-height: 460px) {
  .main__both-panel .panel-export-section, .main__both-panel .panel-effects-section {
    min-height: 4.6rem;
    overflow: hidden;
  }

  .main__both-panel .panel-appearance-section {
    height: 12rem;
    overflow: hidden;
  }

}

@media (min-height: 580px) {
  .main__both-panel .panel-export-section, .main__both-panel .panel-effects-section {
    height: 8rem;
    overflow: hidden;
  }

  .main__both-panel .panel-appearance-section {
    min-height: 22rem;
    overflow: hidden;
  }
}

/* -- MASTER CONTAINER -- */

.fade-in-mixin {
    // For panels in no-doc state
    &.main__ready .section-container,
    // For document panels when there are active documents.
    .panel-set__ready .section-container,
    .panel-set__ready .section-container__no-collapse {
        opacity: 1;
        transition: all 200ms ease;
        
        &.libraries__container {
            opacity: 0;
        }
        
        &.libraries__container.libraries__ready {
            opacity: 1;
        }
    }
}

.main {
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    position: absolute;
    display: flex;
    cursor: default;
    overflow: hidden;

    /* Setup Color Stops */
    &.color-stop__light {
        @import (multiple) "./shared/colors-light.less";
        @import (multiple) "./component-styles.less";

        color: @item-active;
        .fade-in-mixin();
    }

    &.color-stop__dark {
        @import (multiple) "./shared/colors-dark.less";
        @import (multiple) "./component-styles.less";

        color: @item-active;
        .fade-in-mixin();
    }

    &.color-stop__medium {
        @import (multiple) "./shared/colors-medium.less";
        @import (multiple) "./component-styles.less";

        color: @item-active;
        .fade-in-mixin();
    }

    &.color-stop__original {
        @import (multiple) "./shared/colors-original.less";
        @import (multiple) "./component-styles.less";

        color: @item-active;

        .fade-in-mixin();
    }
}
