/* button */
/*
 * jQuery UI Button 1.8.16
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Button#theming
 */
.ui-button, .ui-button span, button.ui-button.ui-state-default span, .ui-button.ui-state-default span {
    font-weight: 500;
}

button.ui-button {
    padding: 4px 12px;
    display: inline-block;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.74857143;
    text-align: center;
    /* white-space: nowrap;*/
    white-space: normal;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid #ddd;
    border-radius: @default-border-radius;
    background: @btn-background-color none;
    .box-shadow(none);
    text-shadow: none !important;
    color: @admin-text-color;
    -webkit-transition: background-color .2s;
    -moz-transition: background-color .2s;
    -o-transition: background-color .2s;
    transition: background-color .2s;
    overflow: hidden;

    &:hover, &.ui-state-hover {
        background-color: darken(@btn-background-color, 5%);
    }
    &:focus, &.ui-state-focus {
        background-color: darken(@btn-background-color, 8%);
    }
    &:active, &.ui-state-active {
        background-color: darken(@btn-background-color, 15%);
    }

    &.ui-state-disabled {
        &:hover, &.ui-state-hover {
            background-color: darken(@btn-background-color, 0%);
        }
        &:focus, &.ui-state-focus {
            background-color: darken(@btn-background-color, 0%);
        }
        &:active, &.ui-state-focus {
            background-color: darken(@btn-background-color, 0%);
        }
    }

    &.btn {
        padding: 5px 12px;
    }
    &.btn-lg {
        .btn-lg; /* reference to admin-lte/buttons.less */

        span.ui-icon {
            width: 22px;
            height: 20px;
            margin-top:-8px;
            &:before {
                font-size: @font-awesome-icon2x-size
            }
        }

        &.ui-button-text-icon-right, &.ui-button-text-icon-left  {
            padding: 6px 16px;
        }
    }
    &.btn-sm {
        .btn-sm;
    }
    &.btn-xs {
        .btn-xs;
    }
    &.btn-flat {
        .border-radius(0);
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        border-width: 1px;
    }

    &:active, &.ui-state-active {
        -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
        -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    }

    &:focus, &.ui-state-focus {
        outline: none;
    }

    &.btn-default {
        .btn-interactions(@btn-background-color);
    }

    &.btn-primary {
        .btn-interactions(@light-blue);

        span.ui-icon {
            color: #fff;
        }
    }

    &.btn-danger {
        .btn-interactions(@red);

        span.ui-icon {
            color: #fff;
        }
    }

    &.btn-fatal {
        .btn-interactions(@dark-red);
        span.ui-icon {
            color: #fff;
        }
    }

    &.btn-warning {
        .btn-interactions(@yellow);
        span.ui-icon {
            color: #fff;
        }
    }

    &.btn-success {
        .btn-interactions(@green);
        span.ui-icon {
            color: #fff;
        }
    }

    &.btn-teal {
        .btn-interactions(@admin-teal);
        span.ui-icon {
            color: #fff;
        }
    }

    &.btn-info {
        .btn-interactions(@aqua);
        span.ui-icon {
            color: #fff!important;
        }
    }

}

button.ui-button-text-only .ui-button-text {
    padding: 0;
    padding-left: .3em !important;
    padding-right: .3em !important;
}

button.ui-button-text-icon-left .ui-button-text, .ui-button-text-icon-right .ui-button-text {
    padding: .2em 1.5em .2em 1.5em;
}

button.ui-button .ui-button-text {
    display: inline-block;
    line-height: 1.32857143;
}

button.ui-state-default {
    background-image: none !important;
}

button.ui-state-disabled {
    cursor: not-allowed !important;
    filter: alpha(opacity=65) !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    opacity: .65 !important;
}

button, a {
    &.btn-fatal {
        color: #fff !important;
        background-color: @dark-red !important;;
        border-color: darken(@dark-red, 5%) !important;;
        .btn-interactions(@dark-red);
    }
}

button, a {
    &.btn-teal {
        color: #fff !important;
        background-color: @admin-teal !important;;
        border-color: darken(@admin-teal, 5%) !important;;
        .btn-interactions(@admin-teal);
    }
}

/* split button */

.ui-splitbutton {
    border-radius: @default-border-radius; /* rounded corners */
}

body .ui-splitbutton {

    .ui-button.ui-splitbutton-menubutton {
        overflow: hidden;
        line-height: 1.74;
        padding: 4px 0px;
        border: 1px solid @default-border-color;
        border-left: none;
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        height: 34.4px;

        span {
            &.ui-icon, &.ui-button-text {
                display: none !important;
            }
        }

        &:before {
            font-family: 'Glyphicons Halflings';
            position: relative;
            font-size: @glyphicon-icon-size;
            font-weight: bold;
            top: -2px;
            overflow: hidden;
            content: "\e259" !important;
        }

       @media (max-width: @screen-xs) {
             &:before {
                 font-size: @glyphicon-icon-size + 1;
             }
       }

    }

    > button {
        border-bottom-right-radius: @default-border-radius;
        border-top-right-radius: @default-border-radius;
        border-right: none;
    }


    &.btn-primary > button {
        .btn-primary;
        .btn-interactions(@light-blue);
        span.ui-icon {
            color: #fff;
        }
    }

    &.btn-success > button {
        .btn-success;
        .btn-interactions(@green);
        span.ui-icon {
            color: #fff;
        }
    }

    &.btn-danger > button {
        .btn-danger;
        .btn-interactions(@red);
        span.ui-icon {
            color: #fff;
        }
    }
    &.btn-fatal > button {
        color: #fff !important;
        background-color: @dark-red !important;;
        border-color: darken(@dark-red, 5%) !important;;
        .btn-interactions(@dark-red);
        span.ui-icon {
            color: #fff;
        }
    }
    &.btn-teal > button {
      color: #fff !important;
      background-color: @admin-teal !important;;
      border-color: darken(@admin-teal, 5%) !important;;
      .btn-interactions(@admin-teal);

      span.ui-icon {
        color: #fff;
      }
    }
    &.btn-info > button {
        .btn-info;
        .btn-interactions(@aqua);
        span.ui-icon {
            color: #fff;
        }
    }
    &.btn-default > button {
        .btn-default;
        .btn-interactions(@btn-background-color);
    }
    &.btn-warning > button {
        .btn-warning;
        .btn-interactions(@yellow);
        span.ui-icon {
            color: #fff;
        }
    }
    &.btn-flat {
        .border-radius(0);
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        border-width: 1px;
    }

    &.btn-material {
        background-color: transparent!important;
        border: none!important;
        .border-radius(2px);

        > button {
            .btn-material;
        }

        button.ui-button.ui-splitbutton-menubutton  {
            border: none;
            .btn-interactions(@btn-background-color);
        }

        &.btn-default > button {
            .btn-interactions(@btn-background-color);
            color: rgba(0,0,0,.87)!important;
            span.ui-icon {
                color: rgba(0,0,0,.87);
            }
        }

        &.btn-success > button {
            .btn-interactions(@btn-background-color);
            color: @green!important;
            span.ui-icon {
                color: green;
            }
        }

        &.btn-primary > button {
            .btn-interactions(@btn-background-color);
            color: @light-blue!important;
            span.ui-icon {
                color: @light-blue;
            }
        }

        &.btn-teal > button {
          .btn-interactions(@btn-background-color);
          color: @admin-teal !important;

          span.ui-icon {
            color: @admin-teal;
          }

        }
    }

    &.btn-block {
        > button {
            display: block;
            border-right: none;
            border-bottom-width: 0.1px;
            z-index: 1;
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
            border-bottom-left-radius: @default-border-radius;
            border-top-left-radius: @default-border-radius;
        }

        button.ui-splitbutton-menubutton {
            z-index: 0;
            width: 100%;
            .border-radius(@default-border-radius);
            &:before {
                float: right;
                right:15px;
            }
        }

    }
}

div.ui-splitbuttonmenu .ui-splitbuttonmenu-list-wrapper {
    ul.ui-menu-list {
        overflow: hidden
    }
}

body .ui-flat .ui-splitbutton .ui-button.ui-splitbutton-menubutton {
    height: 33px;
}


/* ButtonSet */
.ui-selectbooleanbutton.ui-button.ui-state-default,
.ui-selectonebutton .ui-button.ui-state-default,
.ui-selectmanybutton .ui-button.ui-state-default {
    border: 1px solid @input-border-color;
    background: #ffffff;
    font-weight: normal;
    color: #555555;
    .border-radius(@default-border-radius);
}

.ui-selectbooleanbutton.ui-button.ui-state-hover, .ui-selectbooleanbutton.ui-button.ui-state-focus,
.ui-selectonebutton .ui-button.ui-state-hover, .ui-selectonebutton .ui-button.ui-state-focus,
.ui-selectmanybutton .ui-button.ui-state-hover, .ui-selectmanybutton .ui-button.ui-state-focus {
    border: 1px solid #c0c0c0;
    background: @hover-color;
    font-weight: normal;
    color: #212121;
}

.ui-selectbooleanbutton.ui-button.ui-state-active,
.ui-selectonebutton .ui-button.ui-state-active,
.ui-selectmanybutton .ui-button.ui-state-active {
    border: 1px solid darken(@light-blue, 5%);
    background: @light-blue;
    color: #FFFFFF;
}

.ui-selectbooleanbutton.ui-button.ui-state-default .ui-icon {
    background-image: url("#{resource['primefaces-admin:images/ui-icons_454545_256x240.png']}");
}

.ui-selectbooleanbutton.ui-button.ui-state-hover.ui-icon,
.ui-selectbooleanbutton.ui-button.ui-state-focus .ui-icon {
    background-image: url("#{resource['primefaces-admin:images/ui-icons_454545_256x240.png']}");
}

.ui-selectbooleanbutton.ui-button.ui-state-active .ui-icon {
    background-image: url("#{resource['primefaces-admin:images/ui-icons_ffffff_256x240.png']}");
}

div.ui-selectmanybutton div.ui-button.ui-state-default {
    .border-radius(0px);
}

/* delimit ripple effect */
div.ui-selectbooleanbutton {
    overflow: hidden;
}

div .ui-selectonebutton {
    overflow: hidden;
}

div.ui-button {
    overflow: hidden;
}

/* menu button */

body span.ui-button-icon-left, body span.ui-button-icon-right {

    &.ui-icon-triangle-1-s {
        background-image: none ;
        display: inline ;
        &:before {
            font-family: 'Glyphicons Halflings';
            position: relative;
            font-size: @glyphicon-icon-size;
            padding: 0 4px;
            top: -2px;
            font-weight: bold;
            text-indent: 0;
            float: left;
            overflow: hidden;
            content: "\e259" !important;
        }
    }


}


@media (max-width: @screen-xs) {
    body span.ui-button-icon-left, span.ui-button-icon-right {
        &.ui-icon-triangle-1-s {
            &:before {
                font-size: @font-awesome-icon-size + 1;
            }
        }
    }
}

@media (max-width: @screen-xs) {
    body .ui-menubutton span.ui-button-icon-left, body .ui-menubutton span.ui-button-icon-right {
        &.ui-icon-triangle-1-s:before {
            font-size: @glyphicon-icon-size + 1;
        }

    }
}

body .ui-menubutton {

    .border-radius(50%);
    &.btn-material {
        .menubutton-material;

    }

    &.btn-primary > button {
        .btn-primary;
        .btn-interactions(@light-blue);
        span.ui-icon {
            color: #fff;
        }
    }

    &.btn-success > button {
        .btn-success;
        .btn-interactions(@green);
        span.ui-icon {
            color: #fff;
        }
    }

    &.btn-danger > button {
        .btn-danger;
        .btn-interactions(@red);
        span.ui-icon {
            color: #fff;
        }
    }

    &.btn-fatal > button {
        color: #fff !important;
        background-color: @dark-red !important;;
        border-color: darken(@dark-red, 5%) !important;;
        .btn-interactions(@dark-red);
        span.ui-icon {
            color: #fff;
        }
    }

    &.btn-info > button {
        .btn-info;
        .btn-interactions(@aqua);
        span.ui-icon {
            color: #fff;
        }
    }
    &.btn-default > button {
        .btn-default;
        .btn-interactions(@btn-background-color);
    }
    &.btn-warning > button {
        .btn-warning;
        .btn-interactions(@yellow);
        span.ui-icon {
            color: #fff;
        }
    }
    &.btn-flat {
        .border-radius(0);
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        border-width: 1px;
    }
}

body div.ui-fluid .ui-menubutton {
    width: 100%;
}

/* boolean button */

div.ui-selectbooleanbutton {

    span.ui-button-icon-left.ui-icon-close {
        background-image: none !important;
        display: inline !important;
        text-indent: initial;

        &:before {
            font-family: 'Glyphicons Halflings';
            color: @admin-text-color;
            position: relative;
            font-size: (@font-awesome-icon-size - 1) ;
            top: -1px;
            overflow: hidden;
            content: "\e014" !important;
        }
    }

    span.ui-button-icon-left.ui-icon-check {
        background-image: none !important;
        display: inline !important;
        text-indent: initial;

        &:before {
            font-family: 'Glyphicons Halflings';
            color: #fff;
            position: relative;
            font-size: (@font-awesome-icon-size - 1);
            top: -2px;
            overflow: hidden;
            content: "\e013" !important;
        }
    }

}


//material flat buttons

body button, body button.ui-button.ui-widget  {

    &.btn-material {
        .btn-material;
    }

}

//mixins

.menubutton-material() {
    .border-radius(2px);
    border: none;
    position: relative;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0;
    will-change: box-shadow,transform;
    -webkit-transition: -webkit-box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
    -o-transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
    transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
    outline: 0;
    cursor: pointer;
    text-decoration: none;
    background: 0 0!important;
    .btn-interactions(lighten(@btn-background-color,10%));
    color: rgba(0,0,0,.87);
    &:hover, &:focus {
        .box-shadow(none);
    }

    > button.ui-button {
        padding: 6px 30px;
        .btn-interactions(lighten(@btn-background-color,10%));
        background: 0 0!important;
        text-decoration: none;
        border: none;
        position: relative;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0;
        span.ui-button-icon-right, span.ui-button-icon-left  {
            &:before {
                top:-4px;
                font-size: @glyphicon-icon-size + 2;
            }

        }

    }

    &.btn-lg {
        > button.ui-button {
            padding: 8px 30px;
        }
        span.ui-button-icon-right, span.ui-button-icon-left {
            &:before {
                font-size: @glyphicon-icon2x-size;
            }

        }
    }

    &.btn-sm {
        > button.ui-button {
            padding: 4px 20px;
        }
    }

    &.btn-xs {
        > button.ui-button {
            padding: 2px 15px;
        }
    }

    &.btn-flat {
        .border-radius(0);
    }

    &.btn-default {
        color: rgba(0,0,0,.87)!important;
        span.ui-icon {
            color: rgba(0,0,0,.87);
        }

        > button.ui-button {
            color: rgba(0,0,0,.87);
        }
    }

    &.btn-primary {
        color: @light-blue!important;
        span.ui-icon {
            color: @light-blue;
        }

        > button.ui-button {
            color: @light-blue!important;
        }
    }

    &.btn-danger {
        color: @red!important;
        span.ui-icon {
            color: @red;
        }

        > button.ui-button {
            color: @red!important;
        }
    }

    &.btn-fatal {
        color: @dark-red!important;
        span.ui-icon {
            color: @dark-red;
        }

        > button.ui-button {
            color: @dark-red!important;
        }
    }

    &.btn-warning {
        color: @yellow!important;
        span.ui-icon {
            color: @yellow;
        }

        > button.ui-button {
            color: @yellow!important;
        }
    }

    &.btn-success {
        color: @green!important;
        span.ui-icon {
            color: @green;
        }

        > button.ui-button {
            color: @green!important;
        }
    }

    &.btn-teal {
        color: @admin-teal!important;
        span.ui-icon {
            color: @admin-teal;
        }

        > button.ui-button {
            color: @admin-teal!important;
        }
    }

    &.btn-info {
        color: @aqua!important;
        span.ui-icon {
            color: @aqua;
        }

        > button.ui-button {
            color: @aqua!important;
        }
    }
}

.btn-material() {
    border: none;
    border-radius: 2px;
    position: relative;
    padding: 6px 30px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0;
    will-change: box-shadow,transform;
    -webkit-transition: -webkit-box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
    -o-transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
    transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
    outline: 0;
    cursor: pointer;
    text-decoration: none;
    background: 0 0!important;
    .btn-interactions(lighten(@btn-background-color,10%));
    color: rgba(0,0,0,.87);
    &:hover, &:focus {
        .box-shadow(none);
    }

    span.ui-button-icon-right, span.ui-button-icon-left  {
        &:before {
            font-size: @font-awesome-icon-size + 2;
        }

    }

    &.btn-lg {
        padding: 8px 30px;
        &.ui-button-text-icon-right, &.ui-button-text-icon-left  {
            padding: 4px 30px;

            span.ui-icon:before {
                font-size: @font-awesome-icon2x-size;
            }
        }
    }

    &.btn-sm {
        padding: 5px 20px;
    }

    &.btn-xs {
        padding: 4px 15px;
    }

    &.btn-flat {
        .border-radius(0);
    }

    &.btn-default {
        color: rgba(0,0,0,.87)!important;
        span.ui-icon {
            color: rgba(0,0,0,.87);
        }
    }

    &.btn-primary {
        color: @light-blue!important;
        span.ui-icon {
            color: @light-blue;
        }
    }

    &.btn-danger {
        color: @red!important;
        span.ui-icon {
            color: @red;
        }
    }

    &.btn-fatal {
        color: @dark-red!important;
        span.ui-icon {
            color: @dark-red;
        }
    }

    &.btn-warning {
        color: @yellow!important;
        span.ui-icon {
            color: @yellow;
        }
    }

    &.btn-success {
        color: @green!important;
        span.ui-icon {
            color: @green;
        }
    }

    &.btn-teal {
        color: @admin-teal!important;
        span.ui-icon {
            color: @admin-teal;
        }
    }

    &.btn-info {
        color: @aqua!important;
        span.ui-icon {
            color: @aqua;
        }
    }
}

.btn-interactions(@bg-color) {
    &:hover, &.ui-state-hover {
        background-color: darken(@bg-color, 5%) !important;
    }
    &:focus, &.ui-state-focus {
        background-color: darken(@bg-color, 8%) !important;
    }
    &:active, &.ui-state-active {
        background-color: darken(@bg-color, 15%) !important;
    }

    &.ui-state-disabled {
        &:hover, &.ui-state-hover {
            background-color: darken(@bg-color, 0%) !important;
        }
        &:focus, &.ui-state-focus {
            background-color: darken(@bg-color, 0%) !important;
        }
        &:active, &.ui-state-active {
            background-color: darken(@bg-color, 0%) !important;
        }
    }
}


/* generic btn interactions (no matter btn-color) */
button.btn-states {
    &.ui-state-hover {
        opacity: .9;
    }
    &.ui-state-focus {
        opacity: .8;
    }
    &.ui-state-active {
        opacity: .7;
    }
}