// Buttons

@w2ui-btn-text-shadow: 0px 0px 1px #111;

button.w2ui-btn {
    position: relative;
    display: inline-block;
    border-radius: 4px;
    margin: 0px 5px;
    padding: 6px 12px; // do not use !important
    color: #666;
    font-size: 12px; // do not use !important
    border: 1px solid #B6B6B6;
    .linear-gradient-vertical4(#FFF, 0%, #E7E7E7, 100%);
    outline: none;
    box-shadow: 0px 1px 0px white;
    cursor: default;
    min-width: 75px;
    line-height: 110%;
    .user-select(none);
    -webkit-tap-highlight-color: rgba(0,0,0,0);

    &:hover {
        text-decoration: none;
        border: 1px solid #bbb;
        .linear-gradient-vertical4(#F7F7F7, 0%, #DDDDDD, 100%);
        color: #333;
    }

    &:active, &.clicked {
        border: 1px solid #999;
        .linear-gradient-vertical4(#ccc, 0%, #ccc, 100%);
        text-shadow: 1px 1px 1px #eee;
    }

    &:disabled {
        border: 1px solid #bbb !important;
        background: rgb(247, 247, 247) !important;
        color: rgb(189, 188, 188) !important;
        text-shadow: none !important;
    }

    &:focus:before {
        content: "";
        border: 1px dashed #aaa;
        border-radius: 3px;
        position: absolute;
        top: 2px;
        bottom: 2px;
        left: 2px;
        right: 2px;
        pointer-events: none; // needed for safari
    }

    &::-moz-focus-inner {
        border: 0; // issue #810
    }
}

// Blue

button.w2ui-btn-blue {
    color: white;
    .linear-gradient-vertical4(#80C0F7, 0%, #269DF0, 100%);
    border: 1px solid #538AB7;
    text-shadow: @w2ui-btn-text-shadow;

    &:hover {
        color: white;
        .linear-gradient-vertical4(#73B6F0, 0%, #2391DD, 100%);
        border: 1px solid #497BA3;
        text-shadow: @w2ui-btn-text-shadow;
    }

    &:active, &.clicked {
        color: white;
        .linear-gradient-vertical4(#1E83C9, 0%, #1E83C9, 100%);
        border: 1px solid #1268A6;
        text-shadow: @w2ui-btn-text-shadow;
    }

    &:focus:before {
        border: 1px dashed #e8e8e8;
    }
}

// Green

button.w2ui-btn-green {
    color: white;
    .linear-gradient-vertical4(#81CF81, 0%, #52A452, 100%);
    border: 1px solid #479247;
    text-shadow: @w2ui-btn-text-shadow;

    &:hover {
        color: white;
        .linear-gradient-vertical4(#6ABE68, 0%, #3F8F3D, 100%);
        border: 1px solid #479247;
        text-shadow: @w2ui-btn-text-shadow;
    }

    &:active, &.clicked {
        color: white;
        .linear-gradient-vertical4(#377D36, 0%, #377D36, 100%);
        border: 1px solid #555 !important;
        text-shadow: @w2ui-btn-text-shadow;
    }

    &:focus:before {
        border: 1px dashed #e8e8e8;
    }
}

// Orange

button.w2ui-btn-orange {
    color: white;
    .linear-gradient-vertical4(#FCC272, 0%, #FB8822, 100%);
    border: 1px solid #B68B4C;
    text-shadow: @w2ui-btn-text-shadow;

    &:hover {
        color: white;
        .linear-gradient-vertical4(#F4AD59, 0%, #F1731F, 100%);
        border: 1px solid #B68B4C;
        text-shadow: @w2ui-btn-text-shadow;
    }

    &:active, &.clicked {
        color: white;
        border: 1px solid #666;
        .linear-gradient-vertical4(#B98747, 0%, #B98747, 100%);
        text-shadow: @w2ui-btn-text-shadow;
    }

    &:focus:before {
        border: 1px dashed #f9f9f9;
    }
}

// Red

button.w2ui-btn-red {
    color: white;
    .linear-gradient-vertical4(#FF6E70, 0%, #C72D2D, 100%);
    border: 1px solid #BB3C3E;
    text-shadow: @w2ui-btn-text-shadow;

    &:hover {
        color: white;
        .linear-gradient-vertical4(#EE696C, 0%, #AE2527, 100%);
        border: 1px solid #BB3C3E;
        text-shadow: @w2ui-btn-text-shadow;
    }

    &:active, &.clicked {
        color: white;
        border: 1px solid #861C1E;
        .linear-gradient-vertical4(#9C2123, 0%, #9C2123, 100%);
        text-shadow: @w2ui-btn-text-shadow;
    }

    &:focus:before {
        border: 1px dashed #ddd;
    }
}

// Small button

button.w2ui-btn-small {
    padding: 5px !important;
    margin: 0px;
    min-width: 0px;

    &:focus:before {
        border-radius: 2px;
        top: 2px;
        bottom: 2px;
        left: 2px;
        right: 2px;
    }
}