/*
 * Metro UI CSS
 * Copyright 2012 Sergey Pimenov
 * Licensed under the MIT Lilcense
 *
 * Buttons.less
 */

@logo: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGESURBVFhH7ZevTsNQFIfbZgKxB9gjIHgABAIcS0CSQIJE4LEIEgQCyQNMIiHhIRAgEAgECWKIySUTCEjLd3t/Cyml3em6DtMvOTn33PM3XdvbBU2SJMmKlssnjuNtZIisa2t50HQNmXAFEvQHsi9X89CzR8M31/wXZwppDpp0aX7v++XBd41q7r5Qg1I0YE8pQYixqbWFpzAMx1pnoPA5vlOZpdDzHdWPoujZGVX4c1iaH8pvhpwJshOpxtxQawM18JYdrlYXdbKIAa4o1pFphrxX8g5qD0CRPsUeZZogfkzeLjJaxAAjZIuit9oqhbgv4veQl+lGFQqfGHwdbqpLH1YMMUdK8WjfysxHlgbHyKfiM7B/obAf5LNiemfQyB1E6VkwBfsGlb9ZvduM+aVFQ3cgDV0S+gHlHrs8LqAC5gEcxLuD6c5pbeVJy9qpNECLCV1aK+lPwO86kD0TF5s2KqD2m7Au7QDtAO0A7QD/PsBcf0zIWWVdfMRmcd+M/vsvRxB8A6+/IU2N93KYAAAAAElFTkSuQmCC);
@img-back-button: url(data:image/png;base64,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);

.modern-ui-logo, .metro-ui-logo {
    height: 28px;
    width: 28px;
    display: block;
    background-image: @logo;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.back-button {
    height: 32px;
    width: 32px;
    display: block;
    background-image: @img-back-button;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    &.big {
        height: 48px;
        width: 48px;
        left: 36px;
        top: 40px;
    }
    &.page-back {
    }
}

button, .button {
    #font > .control;
    min-width: 90px;
    min-height: 32px;
    height: 32px;
    background-color: #ccc;
    border: 1px transparent solid;
    color: #353535;
    margin-right: 10px;
    margin-bottom: 10px;
    border-raduis: 0;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    padding: 4px 10px;

    &.standart {
        min-width: 90px;
        min-height: 32px;
    }

    &:active, &.default:active {
        background-color: #000 !important;
        color: #fff;
    }

    &:disabled, &.disabled {
        background-color: #eaeaea;
        color: #bebebe;
        cursor: not-allowed;
    }

    &.default {
        background-color: #008287;
        color: #fff;
    }

    &:focus {
        outline: 0;
        border: 1px #353535 dotted;
    }

    &:hover {
    }

}

button, .button, .tool-button {

    &.mini {
        min-height: 24px;
        min-width: 24px;
        height: 26px;
        font-size: .8em;

        [class*=icon-] {

        }
    }
    &.big {
        min-height: 48px;
        height: 48px;
        font-size: 1.2em;

        [class*=icon-] {
            margin-top: 6px;
            zoom: 1;
        }
    }
}

.tool-button {
    [class*=icon-] {
        margin-top: 2px !important;
    }

    &.mini {
        min-width: 22px;
        width: 22px;
    }

    &.big {
        min-width: 48px;
        width: 48px;

        [class*=icon-] {
            margin-top: 2px !important;
            margin-left: 15px !important;
        }
    }
}

.command-button {
    width: 330px;
    text-align: left;
    padding: 10px 20px;
    height: auto;
    color: #000;
    background-color: #ccc;
    #font > .normal;

    & > small {
        display: block;
        #font > .normal;
        font-size: 10pt;
        color: #505050;
    }

    &.default {
        & > small {
            color: #ccc;
        }
    }
}

.tool-button {
    .button;
    min-width: 32px;
    min-height: 32px;
    width: 32px;
    height: 32px;
    text-align: center;
    position: relative;
    padding: 0;

    img {
        width: 16px;
        height: 16px;
        position: absolute;
        top: 8px;
        left: 8px;
    }
}

.toolbar {
    a, button {
        .tool-button;
        margin-right: 0px;
    }

    a {
        padding: 5px 0;
    }
    .clearfix;

    .toolbar-group {
        margin-right: 20px;
        margin-bottom: 10px;
        float: left;
    }
}
.toolbar-vertical {
    width: 33px;
    float: left;
    margin-right: 10px;

    a, button {
        .tool-button;
        margin-bottom: 5px;
    }

    a {
        padding: 5px 0;
    }
    .clearfix;

    .toolbar-group {
        margin-bottom: 20px;
    }
}

.image-button {
    position: relative;
    border: 0;
    padding-right: 45px;

    img, &:active img {
        position: absolute;
        right: 0;
        margin-left: 32px;
        padding: 5px;
        height: 100%;
        top: 0px;
        margin-left: 0px;
        box-sizing: border-box;
        border: 1px transparent solid;
        z-index: 2;
    }
}

.button-set {
    a, button {
        margin-right: 0;
        text-align: center;
        img {
            background-color: transparent;
        }
    }
    a {
        padding: 5px 0;
    }
    button.active {
        background-color: #008287;
        color: #fff;
    }
}