/* 1. Buttons
---------------------------------------------------------- */
.vc_btn {
    // .btn;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-block;
    text-decoration: none !important;
    // @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius
    .button-size(@vc_btn_padding_vertical; @vc_btn_padding_horizontal; 100%; 20px; 4px);
    // Button Sizes
    // --------------------------------------------------

    &-lg {
    // line-height: ensure even-numbered height of button next to large input
        .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
    }
    &-sm {
    // line-height: ensure proper height of button next to small input
        .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
    }
    &-xs {
        .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-small);
    }
    //Button design variations
    &_rounded {
    //default style
    }
    &_square {
        border-radius: 0;
    }
    &_square_outlined {
        border-radius: 0;
        background: none !important;
        border: 2px solid;
    }
    &_round {
        border-radius: 25px;
    }
    &_outlined {
        background: none !important;
        border: 2px solid;
    }
    &_3d {
       //border-width: 1px 1px 5px 1px;
       //border-width: 1px 1px 1px 1px;
       }
    /* Button colors variations */
    &-blue {
        .vc_btn_variants(@blue, #ffffff);
    }
    &-turquoise {
        .vc_btn_variants(@turquoise, #ffffff);
    }
    &-pink {
        .vc_btn_variants(@pink, #ffffff);
    }
    &-violet {
        .vc_btn_variants(@violet, #ffffff);
    }
    &-peacoc {
        .vc_btn_variants(@peacoc, #ffffff);
    }
    &-chino {
        .vc_btn_variants(@chino, #ffffff);
    }
    &-mulled_wine {
        .vc_btn_variants(@mulled_wine, #ffffff);
    }
    &-vista_blue {
        .vc_btn_variants(@vista_blue, #ffffff);
    }
    &-black {
        .vc_btn_variants(@black, #ffffff);
    }
    &-grey {
        .vc_btn_variants(@grey, #666666);
    }
    &-orange {
        .vc_btn_variants(@orange, #ffffff);
    }
    &-sky {
        .vc_btn_variants(@sky, #ffffff);
    }
    &-green {
        .vc_btn_variants(@green, #ffffff);
    }
    &-juicy_pink {
        .vc_btn_variants(@juicy_pink, #ffffff);
    }
    &-sandy_brown {
        .vc_btn_variants(@sandy_brown, #ffffff);
    }
    &-purple {
        .vc_btn_variants(@purple, #ffffff);
    }
    &-white {
        .vc_btn_variants(@white, #666666);
    }
    &-grace {
        .vc_btn_variants(@grace, #ffffff);
    }
    &-default {
        .button-variant(@vc_btn_default_color; @vc_btn_default_bg; @btn-default-border);
    }
    &-primary {
        .button-variant(@vc_btn_primary_color; @vc_btn_primary_bg; @btn-primary-border);
    }
    // Success appears as green
    &-success {
        .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
    }
    // Info appears as blue-green
    &-info {
        .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
    }
    // Warning appears as orange
    &-warning {
        .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
    }
    // Danger and error appear as red
    &-danger {
        .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
    }
}
@import "../lib/wpb_icon.less";
