//
// Buttons
// --------------------------------------------------
// Base styles
// --------------------------------------------------
// Core
.btn {
    display: inline-block;
    @include ie7-inline-block();
    padding: 6px 18px;
    margin-bottom: 0; // For input.btn
    @include setFont(12px, 14px);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid $btnBorder;
    @include border-radius();
    @include gradient-vertical($gay8, $gay7);
    color: $gay2;
    @include ie7-restore-left-whitespace();
    &:hover {
        color: $gay2;
        background-color: $white;
        background-image: none;
        border-color: $btnCancelHoverBorder;
    }
}

.btn-sure {
    border: 1px solid $btnSureBorder;
    @include border-radius($baseBorderRadius);
    background-color: $btnSureBackground;
    @include gradient-vertical($btnSureBackground, $btnSureHighlight);
    color: $white;
    &:link,
    &:active {
        color: $white;
    }
    &:hover {
        background-color: $btnSureHoverBackground;
        border-color: $btnSureHoverBackground;
        background-image: none;
        color: $white;
    }
}

.btn-cancel {
    color: $gay2;
    border: 1px solid $btnCancelBorder;
    @include border-radius($baseBorderRadius);
    background-color: $btnCancelBackground;
    @include gradient-vertical($btnCancelBackground, $btnCancelBackground);
    &:hover {
        color: $gay1;
        background-color: $white;
        background-image: none;
        border-color: $btnCancelHoverBorder;
    }
}

// Success appears as green
.btn-success {
    border: 1px solid $btnSuccessBorder;
    background-color: $btnSuccessBackground;
    @include gradient-vertical($btnSuccessBackgroundHighlight, $btnNewActionBackground);
    color: $white;
    &:hover {
        background-color: #17a251;
        border-color: #17a251;
        background-image: none;
        color: $white;
    }
}

.btn-warning {
    border: 1px solid $btnWarningBackground;
    background-color: $btnWarningBorder;
    color: $white;
    background-image: none;
    &:hover {
        background-color: $btnWarningHoverBorder;
        border-color: $btnWarningHoverBorder;
        color: $white;
    }
}

.btn-attention {
    padding: 8px 10px;
    border-width: 0;
    color: #fff;
    font-weight: bold;
    @include gradient-vertical(#84acde, #84acde);
    span {
        display: none;
    }
    &:hover {
        color: #fff;
        @include gradient-vertical(#6d9fdd, #6d9fdd);
        b {
            display: none;
        }
        span {
            display: inline-block;
        }
    }
}

.btn-cancel-attention {
    padding: 8px 10px;
    border-width: 0;
    color: #fff;
    font-weight: bold;
    @include gradient-vertical(#5ccf89, #5ccf89);
    span {
        display: none;
    }
    &:hover {
        color: #fff;
        @include gradient-vertical(#ff5b5b, #ff5b5b);
        b {
            display: none;
        }
        span {
            display: inline-block;
        }
    }
}

.btn-add-person {
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: $green1;
    @include border-radius(50px);
    span {
        margin: 11px 0 0 11px;
    }
}

.btn-add-person-disabled {
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: $gay16;
    @include border-radius(50px);
    span {
        margin: 11px 0 0 11px;
    }
}

.btn-disabled {
    cursor: default;
    background-image: none;
    border-color: $gay6;
    background-color: $grayLighter ;
    color: $gay5;
    display: inline-block;
    &:hover {
        background-image: none;
        border-color: $gay6;
        background-color: $grayLighter;
        color: $gay5;
        display: inline-block;
    }
}

.btn-disabled:link,
.btn-disabled:active {
    color: $gay5;
}

.square {
    background-color: #7890bd;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #fff;
}

.radius_img30 {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    display: inline-block;
    overflow: hidden;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
}

.radius_img50 {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    display: inline-block;
    overflow: hidden;
    font-size: 12px;
    line-height: 50px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
}

.radius_img80 {
    width: 80px;
    height: 80px;
    border-radius: 80px;
    display: inline-block;
    overflow: hidden;
    font-size: 12px;
    line-height: 80px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
}

.square_img30 {
    width: 30px;
    height: 30px;
    display: inline-block;
    overflow: hidden;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
}

.square_img50 {
    width: 50px;
    height: 50px;
    display: inline-block;
    overflow: hidden;
    font-size: 12px;
    line-height: 50px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
}

.square_img50 {
    width: 80px;
    height: 80px;
    display: inline-block;
    overflow: hidden;
    font-size: 12px;
    line-height: 80px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
}

.avatar-img {
    position: relative;
    .external-tag {
        width: 20px;
        border-radius: 10px;
        position: absolute;
        right: 0;
        bottom: 0;
    }
}