// Button Mixins
// ---------------------------------------------------------

// ----------------------------------------------
// Button Setup -- Base config of the button
// ----------------------------------------------
.shortcode-button() {
    cursor: pointer;
    display: inline-block;
    margin-bottom: 10px;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    background-image: none;
    line-height: 1.5;
    max-width: 90%;
    text-decoration: none;

    &:hover { text-decoration: none; }
}

// ----------------------------------------------
// Button Color -- Creates the color scheme for the button
// ----------------------------------------------
.shortcode-button-color-standard( @c: #aaa ) {
    border: solid 1px darken( @c, 10% );
    background: @c;
    #gradient > .vertical( lighten( @c, 15% ), @c );

    &:hover {
        background: @c;
    }

    .shortcode-button-text-color( @c );
}

.shortcode-button-color-flat( @c: #aaa ) {
    background: @c;
    .shortcode-button-border( @c );
    .shortcode-button-text-color( @c );

    &:hover {
        background: darken( @c, 10% );
    }
}

.shortcode-button-color-clear ( @c: #aaa ) {
    border: 1px solid @c;
    color: @c;

    &:hover {
        background: @c;
        .shortcode-button-text-color( @c );
    }

    &:active,
    &:visited {
        color: @c;
    }
}

// Determines the text color based on the passed color
.shortcode-button-text-color( @c: #aaa ) when ( lightness( @c ) >= 66% ) {
    color: #606060 !important;
    &:visited { color: #606060 !important; }
}
.shortcode-button-text-color( @c: #aaa ) when ( lightness( @c ) < 66% ) {
    color: #fff !important;
    &:visited { color: #fff !important; }
}

.shortcode-button-border( @c: #aaa ) when ( lightness( @c ) >= 66% ) { border: 1px solid darken( @c, 10% ) !important; }


/* Button Styling
------------------------------------------------------------ */
.arconix-button,
.arconix-button-flat,
.arconix-button-clear {
    .shortcode-button();

    i.fa {
        margin-right: 0.5em;
    }
}

.arconix-button-clear {
    .radius();
    background: transparent;
}

.arconix-button {
    .radius();
    .box-shadow-inset( 0, 1px, 0, 0, #ccc );

    &.arconix-button-black { .shortcode-button-color-standard( @black ); }
    &.arconix-button-blue { .shortcode-button-color-standard( @blue ); }
    &.arconix-button-green { .shortcode-button-color-standard( @green ); }
    &.arconix-button-gray,
    &.arconix-button-grey { .shortcode-button-color-standard( @gray ); }
    &.arconix-button-lgray,
    &.arconix-button-lgrey { .shortcode-button-color-standard( @lgray ); }
    &.arconix-button-orange { .shortcode-button-color-standard( @orange ); }
    &.arconix-button-purple { .shortcode-button-color-standard( @purple ); }
    &.arconix-button-red { .shortcode-button-color-standard( @red ); }
    &.arconix-button-tan { .shortcode-button-color-standard( @tan ); }
    &.arconix-button-yellow { .shortcode-button-color-standard( @yellow ); }
    &.arconix-button-white { .shortcode-button-color-standard( @white ); }
}

.arconix-button-flat {
    &.arconix-button-black { .shortcode-button-color-flat( @black ); }
    &.arconix-button-blue { .shortcode-button-color-flat( @blue ); }
    &.arconix-button-green { .shortcode-button-color-flat( @green ); }
    &.arconix-button-gray,
    &.arconix-button-grey { .shortcode-button-color-flat( @gray ); }
    &.arconix-button-lgray,
    &.arconix-button-lgrey { .shortcode-button-color-flat( @lgray ); }
    &.arconix-button-orange { .shortcode-button-color-flat( @orange ); }
    &.arconix-button-purple { .shortcode-button-color-flat( @purple ); }
    &.arconix-button-red { .shortcode-button-color-flat( @red ); }
    &.arconix-button-tan { .shortcode-button-color-flat( @tan ); }
    &.arconix-button-yellow { .shortcode-button-color-flat( @yellow ); }
    &.arconix-button-white { .shortcode-button-color-flat( @white ); }
}

.arconix-button-clear {
    &.arconix-button-black { .shortcode-button-color-clear( @black ); }
    &.arconix-button-blue { .shortcode-button-color-clear( @blue ); }
    &.arconix-button-green { .shortcode-button-color-clear( @green ); }
    &.arconix-button-gray,
    &.arconix-button-grey { .shortcode-button-color-clear( @gray ); }
    &.arconix-button-lgray,
    &.arconix-button-lgrey { .shortcode-button-color-clear( @lgray ); }
    &.arconix-button-orange { .shortcode-button-color-clear( @orange ); }
    &.arconix-button-purple { .shortcode-button-color-clear( @purple ); }
    &.arconix-button-red { .shortcode-button-color-clear( @red ); }
    &.arconix-button-tan { .shortcode-button-color-clear( @tan ); }
    &.arconix-button-yellow { .shortcode-button-color-clear( @yellow ); }
    &.arconix-button-white { .shortcode-button-color-clear( @white ); }
}

.arconix-button-xl {
    font: 24px Arial, Helvetica, sans-serif;
    padding: 12px 38px 13px;
}

.arconix-button-large {
    font: 16px Arial, Helvetica, sans-serif;
    padding: 9px 28px 10px;
}

.arconix-button-medium {
    font: 13px Arial, Helvetica, sans-serif;
    padding: 6px 24px 7px;
}

.arconix-button-small {
    font: 11px Arial, Helvetica, sans-serif;
    padding: 3px 8px 4px;
}