// Name:            Button
// Description:     Defines styles for buttons
//
// Component:       `uk-button`
//
// Sub-objects:     `uk-button-group`
//                  `uk-button-dropdown`
//
// Modifiers:       `uk-button-primary`
//                  `uk-button-success`
//                  `uk-button-danger`
//                  `uk-button-text`
//                  `uk-button-mini`
//                  `uk-button-small`
//                  `uk-button-large`
//
// States:          `uk-active`
//
// Markup:
//
// <!-- uk-button-group -->
// <div class="uk-button-group">
//     <button class="uk-button"></button>
//     <button class="uk-button"></button>
// </div>
//
// <!-- uk-button-dropdown -->
// <div class="uk-button-dropdown" data-uk-dropdown>
//     <button class="uk-button"></button>
//     <div class="uk-dropdown uk-dropdown-small">
//         <ul class="uk-nav uk-nav-dropdown">
//             <li><a href=""></a></li>
//         </ul>
//     </div>
// </div>
//
// ========================================================================


// 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-mini-line-height:                       @global-height-mini - 2;
@button-small-line-height:                      @global-height-small - 2;
@button-large-line-height:                      @global-height-large - 2;

@button-link-font-weight:                       600;
@button-font-size:                              @global-font-size;
@button-mini-font-size:                         round((@global-font-size * 0.78)); // 11px / 12px
@button-small-font-size:                        round((@global-font-size * 0.85)); // 12px / 14px
@button-large-font-size:                        round((@global-font-size * 1.14)); // 16px / 18px

@button-padding-horizontal:                     16px;
@button-mini-padding-horizontal:                4px;
@button-small-padding-horizontal:               8px;
@button-large-padding-horizontal:               24px;

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

@button-muted-background:                       @global-muted-background;
@button-muted-hover-background:                 lighten(@global-muted-background, 3%);
@button-muted-active-background:                darken(@global-muted-background, 3%);

@button-primary-background:                     @global-primary-background;
@button-primary-hover-background:               lighten(@global-primary-background, 3%);
@button-primary-active-background:              darken(@global-primary-background, 3%);

@button-success-background:                     @global-success-background;
@button-success-hover-background:               lighten(@global-success-background, 3%);
@button-success-active-background:              darken(@global-success-background, 3%);

@button-danger-background:                      @global-danger-background;
@button-danger-hover-background:                lighten(@global-danger-background, 3%);
@button-danger-active-background:               darken(@global-danger-background, 3%);

@button-disabled-background:                    @global-muted-color;
@button-disabled-color:                         lighten(@global-color, 10%);

@button-link-color:                             @global-primary-background;
@button-link-hover-text-decoration:             none;
@button-link-disabled-color:                    lighten(@global-color, 10%);

@button-border:                                 @global-border;
@button-dark-border:                            @global-dark-border;
@button-hover-border:                           @global-primary-background;
@button-text-shadow:                            @global-text-shadow;
@button-contrast-text-color:                    @global-contrast-color;
@button-contrast-border:                        transparent;
@button-contrast-hover-border:                  transparent;
@button-contrast-text-shadow:                   1px 1px rgba(0,0,0,0.15);

@button-group-border:                           rgba(0,0,0,0.1);

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

/*
 * Removes inner padding and border in Firefox 4+.
 */

.uk-button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/*
 * 1. Correct inability to style clickable `input` types in iOS.
 * 2. Remove margins in Chrome, Safari and Opera.
 * 3. Remove borders for `button`.
 * 4. Address `overflow` set to `hidden` in IE 8/9/10/11.
 * 5. Correct `font` properties and `color` not being inherited for `button`.
 * 6. Address inconsistent `text-transform` inheritance which is only inherit in Firefox and IE
 * 7. Style
 * 8. `line-height` is used to create a height
 * 9. `min-height` is necessary for `input` elements in Firefox and Opera because `line-height` is not working.
 * 10. Reset button group whitespace hack
 * 11. Required for `a`.
 * 12. Remove outline.
 */

.uk-button {
    /* 1 */
    -webkit-appearance: none;
    /* 2 */
    margin: 0;
    /* 3 */
    border: none;
    /* 4 */
    overflow: visible;
    /* 5 */
    font: inherit;
    color: @button-color;
    /* 6 */
    text-transform: none;
    /* 7 */
    display: inline-block;
    box-sizing: border-box;
    border-radius: @button-border-radius;
    padding: 0 @button-padding-horizontal;
    background: transparent;
    vertical-align: middle;
    /* 8 */
    line-height: @button-line-height;
    /* 9 */
    min-height: @button-height;
    /* 10 */
    font-size: @button-font-size;
    /* 11 */
    text-decoration: none;
    text-align: center;
    /* 12 */
    outline: none;
    .hook-button;
}

.uk-button:not(:disabled) { cursor: pointer; }

/*
 * Hover
 * 1. Apply hover style also to focus state
 * 2. Required for `a` elements
 */

.uk-notouch {
    .uk-button:hover { // 1
        color: @button-hover-color;
        /* 2 */
        text-decoration: none;
        .hook-button-hover;
    }

    /* Active */
    .uk-button:active,
    .uk-button.uk-active {
        color: @button-active-color;
        .hook-button-active;
    }
}

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

/*
 * Modifier: `uk-button-muted`
 */

 .uk-button.uk-button-muted {
    background-color: @button-muted-background;
    color: @button-contrast-text-color;
    text-shadow: @button-contrast-text-shadow;
    border-color: @button-contrast-border;
}

.uk-notouch {
    /* Hover */
    .uk-button.uk-button-muted:hover {
        background-color: @button-muted-hover-background;
        color: @button-contrast-text-color;
        border-color: @button-contrast-hover-border;
    }

    /* Active */
    .uk-button.uk-button-muted:active,
    .uk-button.uk-button-muted.uk-active {
        background-color: @button-muted-active-background;
        color: @button-contrast-text-color;
        border-color: @button-contrast-hover-border;
    }
}

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

.uk-button.uk-button-primary {
    background-color: @button-primary-background;
    color: @button-contrast-text-color;
    text-shadow: @button-contrast-text-shadow;
    border-color: @button-contrast-hover-border;
}

.uk-notouch {
    /* Hover */
    .uk-button.uk-button-primary:hover {
        background-color: @button-primary-hover-background;
        color: @button-contrast-text-color;
        border-color: @button-contrast-hover-border;
    }

    /* Active */
    .uk-button.uk-button-primary:active,
    .uk-button.uk-button-primary.uk-active {
        background-color: @button-primary-active-background;
        color: @button-contrast-text-color;
        border-color: @button-contrast-hover-border;
    }
}



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

.uk-button.uk-button-success {
    background-color: @button-success-background;
    color: @button-contrast-text-color;
    text-shadow: @button-contrast-text-shadow;
    border-color: @button-contrast-hover-border;
}

.uk-notouch {
    /* Hover */
    .uk-button.uk-button-success:hover {
        background-color: @button-success-hover-background;
        color: @button-contrast-text-color;
        border-color: @button-contrast-hover-border;
    }

    /* Active */
    .uk-button.uk-button-success:active,
    .uk-button.uk-button-success.uk-active {
        background-color: @button-success-active-background;
        color: @button-contrast-text-color;
        border-color: @button-contrast-hover-border;
    }
}

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

 .uk-button.uk-button-danger {
    background-color: @button-danger-background;
    color: @button-contrast-text-color;
    text-shadow: @button-contrast-text-shadow;
    border-color: @button-contrast-hover-border;
}

.uk-notouch {
    /* Hover */
    .uk-button.uk-button-danger:hover {
        background-color: @button-danger-hover-background;
        color: @button-contrast-text-color;
        border-color: @button-contrast-hover-border;
    }

    /* Active */
    .uk-button.uk-button-danger:active,
    .uk-button.uk-button-danger.uk-active {
        background-color: @button-danger-active-background;
        color: @button-contrast-text-color;
        border-color: @button-contrast-hover-border;
    }
}

/* Disabled state
 * Overrides also the color modifiers
 ========================================================================== */

/* Equal for all button types */
.uk-button:disabled {
    background-color: @button-disabled-background;
    color: @button-disabled-color;
    .hook-button-disable;
}


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

 /* Reset */
.uk-button-link {
    /* 1 */
    -webkit-appearance: none;
    /* 2 */
    margin: 0;
    /* 3 */
    border: none;
    /* 4 */
    overflow: visible;
    /* 5 */
    font: inherit;
    font-weight: @button-link-font-weight;
    /* 6 */
    text-transform: none;
    /* 7 */
    display: inline-block;
    box-sizing: border-box;
    padding: 0 @button-padding-horizontal;
    background: none;
    vertical-align: middle;
    /* 8 */
    line-height: @button-line-height;
    /* 9 */
    min-height: @button-height;
    /* 10 */
    font-size: @button-font-size;
    /* 11 */
    text-align: center;
    .hook-button-link;
}

/* Color */
.uk-button-link { color: @button-link-color; }
.uk-button-link.uk-button-muted { color: @button-muted-background !important; }
.uk-button-link.uk-button-primary { color: @button-primary-background !important; }
.uk-button-link.uk-button-success { color: @button-success-background !important; }
.uk-button-link.uk-button-danger { color: @button-danger-background !important; }
.uk-button-link.uk-button-primary:hover { color: lighten(@button-primary-background, 8%) !important; }
.uk-button-link.uk-button-success:hover { color: lighten(@button-success-background, 8%) !important; }
.uk-button-link.uk-button-danger:hover { color: lighten(@button-danger-background, 8%) !important; }

.uk-button-link:hover,
.uk-button-link:focus,
.uk-button-link:active,
.uk-button-link.uk-active {
    text-decoration: @button-link-hover-text-decoration;
    outline: none;
}

.uk-button-link:disabled { color: @button-link-disabled-color; }

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

.uk-button-mini {
    min-height: @button-mini-height;
    padding: 0 @button-mini-padding-horizontal;
    line-height: @button-mini-line-height;
    font-size: @button-mini-font-size;
}

.uk-button-small {
    min-height: @button-small-height;
    padding: 0 @button-small-padding-horizontal;
    line-height: @button-small-line-height;
    font-size: @button-small-font-size;
}

.uk-button-large {
    min-height: @button-large-height;
    padding: 0 @button-large-padding-horizontal;
    line-height: @button-large-line-height;
    font-size: @button-large-font-size;
    .hook-button-large;
}


/* Sub-object `uk-button-group`
 ========================================================================== */

/*
 * 1. Behave like buttons
 * 2. Create position context for dropdowns
 * 3. Remove whitespace between child elements when using `inline-block`
 * 4. Prevent buttons from wrapping
 * 5. Remove whitespace between child elements when using `inline-block`
 */

.uk-button-group {
    /* 1 */
    display: inline-block;
    vertical-align: middle;
    /* 2 */
    position: relative;
    /* 3 */
    font-size: 0.001px;
    /* 4 */
    white-space: nowrap;
}

.uk-button-group > * { display: inline-block; }

/* 5 */
.uk-button-group .uk-button { vertical-align: top; }

/*
 * Reset border-radius
 */

.uk-button-group > .uk-button:not(:first-child):not(:last-child),
.uk-button-group > div:not(:first-child):not(:last-child) .uk-button {
    border-left-color: @button-group-border;
    border-right-color: @button-group-border;
    border-radius: 0;
}

.uk-button-group > .uk-button:first-child,
.uk-button-group > div:first-child .uk-button {
    border-right-color: @button-group-border;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.uk-button-group > .uk-button:last-child,
.uk-button-group > div:last-child .uk-button {
    border-left-color: @button-group-border;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/*
* Collapse border
*/

.uk-button-group > .uk-button:nth-child(n+2),
.uk-button-group > div:nth-child(n+2) .uk-button { margin-left: -1px; }

/*
* Create position context to superimpose the successor elements border
* Known issue: If you use an `a` element as button and an icon inside,
* the active state will not work if you click the icon inside the button
* Workaround: Just use a `button` or `input` element as button
*/

.uk-button-group .uk-button:hover,
.uk-button-group .uk-button:active,
.uk-button-group .uk-button.uk-active { position: relative; }
 
/* Sub-object: `uk-button-dropdown`
 ========================================================================== */

/*
 * 1. Behave like buttons
 * 2. Create position context for dropdowns
 */

.uk-button-dropdown {
    /* 1 */
    display: inline-block;
    vertical-align: middle;
    /* 2 */
    position: relative;
}


// Hooks
// ========================================================================

.hook-button() {
    border: 1px solid @button-border;
    transition: 0.1s;

    .dark & {
        border-color: @button-dark-border;
        color: @button-dark-color;
    }
}
.hook-button-hover() {
    border-color: @button-hover-border;
}
.hook-button-active() {}
.hook-button-disable() {}
.hook-button-link() {}
.hook-button-large() {}