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

svg use {
    transform: rotate(0);
}

.icon {
    display: inline-flex;
}

.toolbar-button, .toolbar__backToPs.button-simple{
    display: flex;
    align-items: center;
    justify-content: center;
    
    svg {
        box-sizing: content-box;
        width: 1.6rem;
        height: 1.6rem;
        padding-bottom: 0.2rem;
        border-bottom: @hairline solid transparent;
        fill: @icon-active;
        stroke: none;
        color: @mid-bg-alt;
    }
    &:hover {
        svg {
            fill: @icon-hover;
            stroke: none;
        }
    }
}

.tool-selected.button-simple svg, .tool-selected.button-simple:hover svg {
    fill: @focus-highlight;
    stroke: none;
}

.toolbar__backToPs.button-simple {
    position: absolute;
    bottom: 0;
    width: 5rem;
    svg {
        fill: @icon-active;
    }
}

.button-generator {
    background: url("img/ico-generator-white.svg") no-repeat;
    background-size: 2rem;
    background-position-x: 1rem;
    background-position-y: 0.5rem;
}

.pop-over-header .button-generator {
    background: url("img/ico-generator-black.svg") no-repeat;
    background-size: 2rem;
    background-position-x: 1rem;
    background-position-y: 0.5rem;
}

.x-mode-button(@name) {
    background: url("img/ico-@{name}-black.svg") no-repeat;
    background-size: 2rem;
}

#mode-grid { .x-mode-button(mode-grid) }

#mode-divide { .x-mode-button(mode-divide) }

#mode-inset { .x-mode-button(mode-inset) }

.control-group,
.label,
.button-toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    svg {
        width: 1.6rem;
        height: 2.4rem;
        fill: @icon-active;
        stroke: none;
        color: @mid-bg-alt;
    }
    
    &__disabled {
        svg {
            fill: @item-inactive;
        }
    }
}

.button-simple{
    svg {
        width: 1.6rem;
        height: 1.6rem;
        fill: @icon-active;
    }
    
    &:hover svg {
        fill: @icon-hover;
    }
    
    &__disabled, &__disabled:hover, &:disabled svg {
        svg {
            fill: @icon-disabled;
        }
        
        &__disabled, &__disabled:hover {
            svg {
                fill: @item-disabled;
            }
        }
    }
    
    &.button-plus {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    &.button-iOS {   
        width: 2.4rem;
        height: 1.6rem;
        
        svg {
            width: 2.4rem;
            height: 1.6rem;
        }
    }
    &.button-xdpi {   
        width: 2.8rem;
        height: 1.6rem;
        svg {
            width: 2.8rem;
            height: 1.6rem;
        }
    }
}

.export-button {
    height: 1.7rem;
}

.search-button {
    height: 1.7rem;
}

.reference-mark {
    margin-right: 4.5rem;
    
    svg {
        width: 2.4rem;
        height: 2.4rem;
    }
}

.face {
    .button-toggle {
        svg {
            display: none;
        }
    }

    .button-toggle[data-selected="true"], &:hover .button-toggle {
        svg {
            display: block;
            fill: @icon-active;
            stroke: none;
        }
    }
}

.face__selected {
    .button-toggle,
    &:hover .button-toggle{
        svg {
            fill: @icon-hover;
            stroke: none;
            display: block;
        }
    }
}

.layer__not-visible
.layer__not-visible + .layer-group {
    .face:hover .button-toggle,
    .face .button-toggle {
        svg {
            fill: @icon-hover;
            opacity: @label-hidden-opacity;
            stroke: none;
            display: block;
        }
    }
}

.face.face__not-visible:hover .button-toggle,
.face.face__not-visible .button-toggle {
    svg {
        fill: @icon-hover;
        opacity: @label-hidden-opacity;
        stroke: none;
        display: block;
    }
}

.fill-list__fill,
.stroke-list__stroke,
.shadow-list__shadow {

    .button-toggle {
        svg {
            display: none;
        }
    }

    .button-toggle[data-selected="false"] {
        svg {
            display: block;
            fill: @icon-active;
            stroke: none;
        }
    }

    &:hover .button-toggle:not([data-selected="false"]) {
        opacity: 0.5;

        svg {
            display: block;
            fill: @icon-active;
            stroke: none;
        }
    }

    .button-toggle[data-selected="true"] {
        svg {
            display: none;
            fill: @bg-alt;
            stroke: none;
            color: @mid-bg-alt;
        }
    }

    .button-toggle.layer-delete {
        svg {
            stroke-width: 40px;
            stroke: none;
            transform: scale(2);
        }
    }
}

/* STYLE ----------------------*/

.button-combo:focus {
    background: url("img/ico-search-white.svg") no-repeat center;
    background-position-x: .5rem;
}

.pop-over-header .button-combo:focus {
    background: url("img/ico-search-black.svg") no-repeat center;
    background-position-x: .5rem;
}

/* PAGES ----------------------*/

.face__kind {
    display: flex;
    align-items: center;
    justify-content: center;

    svg {
        width: 1.8rem;
        height: 2.4rem;
        fill: @icon-disabled;
        stroke: none;

    }
}

.face[data-kind="group"] .face__kind {
    svg {
        fill: @icon-active;
    }
}

.face__not-visible,
.layer__not-visible + .layer-group .face {
    .face__kind,
    &:hover .face__kind
    &.face[data-kind="group"]:hover .face__kind,
    &.face[data-kind="group"] .face__kind {
      svg {
          opacity: @label-hidden-opacity;
          fill: @icon-active;
          stroke: none;
      }
    }
}

// applies to the selected item
.face__selected .face__kind, .face__selected:hover .face__kind {
  svg {
      fill: @icon-hover;
      stroke: none;
  }
}

.face__selected[data-kind="group"] .face__kind {
    svg {
        fill: @icon-hover;
        stroke: none;
    }
}

.face {
    .face__kind {
        &.face__kind__error,
        &.face__kind__error:hover {
            svg {
                fill: @label-error-color;
            }
        }

        &.face__kind__warning,
        &.face__kind__warning:hover {
            svg {
                fill: @label-warning-color;
            }
        }

        &.face__kind__alert,
        &.face__kind__alert:hover {
            svg {
                fill: @label-alert-color;
            }
        }
    }    
}
