// Copyright (C) YOOtheme GmbH, http://www.gnu.org/licenses/gpl.html GNU/GPL */

//
// Component: Button
//
// ========================================================================


// Variables
// ========================================================================

@button-height:                                 @global-height;
@button-mini-height:                            @global-height-mini;
@button-small-height:                           @global-height-small;
@button-large-height:                           @global-height-large;

@button-line-height:                            (@global-height - (2 * @button-border-width));
@button-mini-line-height:                       (@global-height-mini - (2 * @button-border-width));
@button-small-line-height:                      (@global-height-small - (2 * @button-border-width));
@button-large-line-height:                      (@global-height-large - (2 * @button-border-width));

@button-font-size:                              14px;
@button-background:                             rgba(0,0,0,0);
@button-color:                                  @global-color;
@button-hover-background:                       rgba(0,0,0,0);
@button-hover-color:                            @global-link-color;
@button-active-background:                      rgba(0,0,0,0);
@button-active-color:                           @global-link-color;


@button-primary-background:                     @global-dark-background;
@button-primary-color:                          @global-contrast-color;
@button-primary-hover-background:               @global-primary-background;
@button-primary-hover-color:                    @global-contrast-color;
@button-primary-active-background:              @global-dark-background;
@button-primary-active-color:                   @global-contrast-color;

@button-success-background:                     @global-success-background;
@button-success-color:                          @global-contrast-color;
@button-success-hover-background:               saturate(lighten(@button-success-background, 5%), 10%);
@button-success-hover-color:                    @global-contrast-color;
@button-success-active-background:              darken(@button-success-background, 5%);
@button-success-active-color:                   @global-contrast-color;

@button-danger-background:                      @global-danger-background;
@button-danger-color:                           @global-contrast-color;
@button-danger-hover-background:                saturate(lighten(@button-danger-background, 5%), 10%);
@button-danger-hover-color:                     @global-contrast-color;
@button-danger-active-background:               darken(@button-danger-background, 5%);
@button-danger-active-color:                    @global-contrast-color;

@button-disabled-background:                    @global-light-background;
@button-disabled-color:                         @global-muted-color;

@button-link-color:                             @global-link-color;
@button-link-hover-color:                       @global-link-hover-color;
@button-link-disabled-color:                    @global-muted-color;
@button-link-hover-text-decoration:             none;


//
// New
//

@button-border-width:                           1px;
@button-border-color:                           @global-color;
@button-border-hover-color:                     @button-hover-color;
@button-border-active-color:                    @button-active-color;

@button-text-transform:                         uppercase;


// Component
// ========================================================================

.hook-button() {
    border: @button-border-width solid @button-border-color;
    text-transform: @button-text-transform;
}

.hook-button-hover() { border-color: @button-border-hover-color; }
.hook-button-active() { border-color: @button-border-active-color; }


// Color modifiers
// ========================================================================

//
// Modifier: `uk-button-primary`
//

.hook-button-primary() { border-color: transparent; }

.hook-button-primary-hover() { border-color: transparent; }
.hook-button-primary-active() { border-color: transparent; }

//
// Modifier: `uk-button-success`
//

.hook-button-success() { border-color: transparent; }

.hook-button-success-hover() { border-color: transparent; }
.hook-button-success-active() { border-color: transparent; }

//
// Modifier: `uk-button-danger`
//

.hook-button-danger() { border-color: transparent; }

.hook-button-danger-hover() { border-color: transparent; }
.hook-button-danger-active() { border-color: transparent; }


// Disabled state
// ========================================================================

.hook-button-disable() { border-color: transparent; }


// Modifier: `uk-button-link`
// ========================================================================

.hook-button-link() { border-color: transparent; }


// Size modifiers
// ========================================================================

.hook-button-large() {}


// Miscellaneous
// ========================================================================

.hook-button-misc() {

    /* Collapse border */
    .uk-button-group > .uk-button:nth-child(n+2),
    .uk-button-group > div:nth-child(n+2) .uk-button { border-left-width: 0; }

    .uk-button-group > .uk-button:nth-child(n+2):hover,
    .uk-button-group > div:nth-child(n+2) .uk-button:hover,
    .uk-button-group > .uk-button:nth-child(n+2):active,
    .uk-button-group > .uk-button:nth-child(n+2).uk-active {
        margin-left: -@button-border-width;
        border-left-width: @button-border-width;
    }

}