@import "../../../css/src/dpl/variables.less";
@import "../../../css/src/dpl/mixins.less";
@import "variables.less";
@import "mixin.less";

// BUTTON STYLES
// -------------

// Base styles
// --------------------------------------------------

// Core
.ks-button {
    padding: 4px 10px 4px;
    font-size: @baseFontSize;
    color: @btnColor;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, .75);
    vertical-align: middle;
    .buttonState(@btnBackground, @btnBackgroundHighlight, @btnColor, @btnColor);
    border: 1px solid @btnBorder;
    *border: 0; // Remove the border to prevent IE7's black border on input:focus
    border-bottom-color: darken(@btnBorder, 10%);
    border-radius: 4px;
    .box-shadow(@btnShadow);
    cursor: pointer; // Give IE7 some love
    .ie67-restore-left-whitespace();
    .ks-inline-block_();
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

// Button Sizes
// --------------------------------------------------

// Large
.ks-button-large {
    padding: 9px 14px;
    font-size: @baseFontSize + 2px;
    border-radius: 5px;
}

// Small
.ks-button-small {
    padding: 5px 9px;
    font-size: @baseFontSize - 2px;
}

// Mini
.ks-button-mini {
    padding: 2px 6px;
    font-size: @baseFontSize - 2px;
}

// Alternate buttons
// --------------------------------------------------

// Set text color
// -------------------------
.ks-button-primary,
.ks-button-warning,
.ks-button-danger,
.ks-button-success,
.ks-button-info,
.ks-button-inverse {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
}

// Set the backgrounds
// -------------------------
.ks-button-primary {
    .buttonState(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight,@btnInverseColor,@btnOtherActiveColor);
}

// Warning appears are orange
.ks-button-warning {
    .buttonState(@btnWarningBackground, @btnWarningBackgroundHighlight,@btnInverseColor,@btnOtherActiveColor);
}

// Danger and error appear as red
.ks-button-danger {
    .buttonState(@btnDangerBackground, @btnDangerBackgroundHighlight,@btnInverseColor,@btnOtherActiveColor);
}

// Success appears as green
.ks-button-success {
    .buttonState(@btnSuccessBackground, @btnSuccessBackgroundHighlight,@btnInverseColor,@btnOtherActiveColor);
}

// Info appears as a neutral blue
.ks-button-info {
    .buttonState(@btnInfoBackground, @btnInfoBackgroundHighlight,@btnInverseColor,@btnOtherActiveColor);
}

// Inverse appears as dark gray
.ks-button-inverse {
    .buttonState(@btnInverseBackground, @btnInverseBackgroundHighlight,@btnInverseColor,@btnOtherActiveColor);
}