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

button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}

.button-simple {
    border: none;
    padding: 0;
    margin: 0;
}

.button-simple__disabled {
}

.button-toggle__disabled {
}

.button-toggle.column-1 {
  .column-size(1rem);
}

.button-toggle.column-2 {
   .column-size(2rem);
 }

.button-toggle.column-3 {
  .column-size(3rem);
}

.button-toggle.column-4 {
  .column-size(4rem);
}

.button-toggle.column-5 {
  .column-size(5rem);
}

.button-toggle.column-6 {
  .column-size(6rem);
}

.button-toggle.column-7 {
  .column-size(7rem);
}

.button-toggle {
    .size(2rem);
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    flex-grow: 0;
}

.button-radius(@value: 3){
    border-radius: ~"@{value}px"; //breakpoint
}

.smallButton {
    .size(2rem);
}

.medButton {
    .size(2rem);
}

.button-color {
    .size(2rem);
    .border-transparency(@hairline, solid, @mid-bg-alt, .88);
    .button-radius();
    background-color: purple;
    padding: 0;
    margin: 0;
}

.button-radio ul {
    display: flex;
    justify-content: center;
}

.button-combo:focus {
    cursor: text;
    .background-transparency(@item-active, .3);
}

.button-radio {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  flex-grow: 1;
  height: 3rem;
}

.button-radio__fixed {
    flex-grow: 0;
}

.button-combo {
    background: none;
    color: @item-active;
    opacity: .66;
    box-sizing: border-box!important;
    height: 3rem;
    text-align: center;
    border: @hairline solid!important;
    .button-radius();
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

.button-generator {
    .size(2rem);
    float: right;
}

.button-settings {
    .medButton();
    font-size: 1.5rem;
    color: @item-active;
    font-weight: 300;
    opacity: .65;
}

.button-lorem-ipsum,
.button-glyphs {
    .medButton();
    font-size: 1.5rem;
    line-height: 2rem;
    color: @item-active;
    font-weight: 300;
    opacity: .55;
    
    display: flex;
    align-items: center;
    justify-content: center;

    svg {
        width: 1.3rem;
        height: 1.3rem;
        fill: @icon-active;
    }
}

.button-lorem-ipsum:hover,
.button-settings:hover,
.button-glyphs:hover {
    opacity: .95;
}

.button-settings {
    .smallButton();
}

.button-cluster {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.ui-selectmenu-button {
    display: flex;
    justify-content: center;
    align-items: center;

}

.button-tool-options {
    display: flex;
    align-content: inherit;
    justify-content: inherit;

}

.button-tool-options button{
    padding: 0 1.6rem;
}

.button-tool-options button:last-child {
    padding: 0 0 0 1.6rem;
}

.button-checkbox {
    width: 1.6rem;
    height: 1.6rem;
    position: relative;
    label {
        box-sizing: border-box;
        width: 1.6rem;
        height: 1.6rem;
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
        background: transparent;

        svg {
            
            width: 1.6rem;
            fill: @icon-active;
            height: 1.6rem;
            top: 0;
            position: absolute;
            left: 0;
            
        }

        .mixed {
            display: none;
        }
        
        .checked {
            display: none;
        }

        &:hover {
            svg {
                fill: @icon-hover;
            }
        }
    }

    input[type=checkbox] {
        visibility: hidden;
        margin: 0;
        
        &:checked + label {
            .mixed {
                display: none;
            }
            
            .unchecked {
                display: none;
            }            
            
            .checked {
                display: block;
                fill: @icon-active;
            }
        }

        &:checked:hover + label {
            svg {
                fill: @icon-hover;
            }
        }

        &:checked + label:after {
          opacity: 1;
        } 
    }
}

.button-checkbox__mixed {
    label {
        .mixed {
            display: block;
        }
        
        .unchecked {
            display: none;
        }            
        
        .checked {
            display: none;
        }           
        
        &:hover {
            svg {
                fill: @icon-hover;
            }
        }
    }
}

.checkbox-label {
    line-height: 1.2rem;
}
