/**
 * Buttons
 */

a.btn {
    display: inline-block;
    zoom: 1;
    cursor: pointer;
    height: 18px;
    width: 20px;
}

@mixin button(
    $suffix: null,
    $margin: 0 0 0 10px,
    $border-color: darken($base-color, 3%),
    $border-width: 1px,
    $border-style: solid,
    $border-radius: $radius-normal / 3,
    $background-color: lighten($base-color, 30%),
    $background-gradient: false,
    $border-color-over: lighten($base-color, 5%),
    $background-color-over: lighten($base-color, 32%),
    $background-image: null
) {
    .btn-quick-edit-#{$suffix} {
        margin: $margin;
        @if $border-color != null {
            border-color: $border-color;
            border-width: $border-width;
            border-style: $border-style
        }

        @if top($border-radius) > 0 or
            right($border-radius) > 0 or
            bottom($border-radius) > 0 or
            left($border-radius) > 0
       {
            @include radius(top($border-radius) right($border-radius) bottom($border-radius) left($border-radius));
       }

       @if $background-color != null {
           background-color: $background-color;

           @if $background-gradient == true {
               @include background-gradient($background-color, bevel);
           }
       }
    }

    @if $border-color-over != null or
        $background-color-over != null
    {
        .btn-quick-edit-#{$suffix}:hover {
            @if $border-color-over != null {
                border-color: $border-color-over;
            }

            @if $background-color-over != null {
                background-color: $background-color-over;

                @if $background-gradient == true {
                    @include background-gradient($background-color-over, bevel, top)
                }
            }
        }
    }

    .btn-wrap {
        .btn-el-icon, btn-el-label {
            display: inline-block;
        }
    }

    @if $background-image != null {
        .btn-el-icon-quick-edit-#{$suffix} {
            width: 16px;
            background: theme-background-image($theme-name, $background-image, false, true) no-repeat;
        }
    }
}

@include button(
    $suffix: phone,
    $background-gradient: true,
    $background-image: 'pencil.gif'
);

@include button(
    $suffix: email,
    $background-gradient: true,
    $background-image: 'pencil.gif'
);