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

.color-input {
    display: flex;
    justify-content: flex-start;
    align-content: center;
    margin-right: 0.6rem;
    margin-top: 0.8rem;
}

.color-input {
    .fill__preview,
    .stroke__preview {
        height: 100%;
        width: 100%;
    }

    .stroke__preview:after {
        position: absolute;
        content: " ";
        width: 50%;
        height: 50%;
        left: 25%;
        top: 25%;
        background-color: @bg-panel;
        border-radius: 0.2rem;
        z-index: 10;
    }
        
    .type__preview {
        line-height: normal;
        color: black;
        font-size: 2rem;        
    }
    
}

.color-input__swatch__background,
.color-input__swatch__background.color-input__disabled {
    background-color: @item;
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    border-radius: 0.5rem;
    .background-checkerboard(32);
    overflow: hidden;
    position: relative;

    &:focus {
        box-shadow: 0 0 0 0.2rem @focus-highlight;
    }
}

.color-input__disabled {
    opacity: 0.4;
    
    .color-input__mixednone {
        display: none
    }
    
    .fill__preview {
        display: none;
    }
}

.color-input__swatch__color {
    width: 3.2rem;
    height: 3.2rem;
    display: flex;
    align-items: center;
    flex-grow: 0;
    flex-shrink: 0;
    box-sizing:  border-box;
    padding: 0;
    margin: 0;
    justify-content: center;
    overflow: hidden;
}

.shadow-list__shadow .color-input__swatch__color {
    width: 2.5rem;
    height: 2.5rem;
}

.color-input__empty {
    width: 3rem;
    height: 3rem;
    margin-right: 1.2rem;
    margin-top: 1.1rem;
    
    .fill__preview__disabled{
        border: @hairline solid @item-disabled;
        opacity: .25;
        width: 100%;
        height: 100%;
        border-radius: .2rem;
    }
}

.color-widget {
    display: flex;
    justify-content: flex-start;
    align-content: center;
}

.color-button-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.color-input__invalid-color .color-input__swatch__color {
    background: @transparent-black;
}

.color-input__mixednone {
    width: 6.8rem;
    height: 6.8rem;
    left: 1.1rem;
    top: 0.1rem;
    position: absolute;
    transform: rotate(45deg);
}

.color-input__mixed {    
    .color-input__mixednone {    
        border: 0.4rem solid @color-mixed;
    }
}
