// Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

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

@button-mini-font-size:                         round((@global-font-size * 0.733)); // 11px
@button-small-font-size:                        round((@global-font-size * 0.8)); // 12px
@button-large-font-size:                        round((@global-font-size * 1.067)); // 16px

@button-background:                             rgba(0,0,0,0);
@button-color:                                  @global-color;
@button-hover-background:                       rgba(0,0,0,0);
@button-hover-color:                            @global-contrast-color;
@button-active-background:                      rgba(0,0,0,0);
@button-active-color:                           @global-contrast-color;

@button-primary-background:                     @global-primary-background;
@button-primary-color:                          @global-contrast-color;
@button-primary-hover-background:               darken(@global-primary-background, 10%);
@button-primary-hover-color:                    @global-contrast-color;
@button-primary-active-background:              darken(@global-primary-background, 15%);
@button-primary-active-color:                   @global-contrast-color;

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

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

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

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

//
// New
//

@button-border-width:                           @global-border-width;
@button-border:                                 #999;
@button-hover-border:                           #444;
@button-active-border:                          #333;
@button-link-font-family:                       'Chester';
@button-link-icon:                              "\e901";


// OMTDComponent
// ========================================================================

.hook-button() {

    position: relative;
    border: @button-border-width solid @button-border;
    overflow: hidden;
    -webkit-transition: color .4s, background .2s;
    transition: color .4s, background .2s;
    z-index: 1;

    &:not(.uk-button-link):before {
        content: "";
        position: absolute;
        left: -160%;
        height: 100%;
        width: 130%;
        background: @button-hover-border;
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        -webkit-transition: left .4s;
        transition: left .4s;
        z-index: -1;
    }

}

.hook-button-hover() {

    border-color: @button-hover-border;

    &:not(.uk-button-link):before { left: -15%; }

}

.hook-button-active() {

    border-color: @button-active-border;

    &:not(.uk-button-link):before {
        left: -15%;
        background: @button-active-border;
    }

}


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

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

.hook-button-primary() {

    border-color: transparent;

    &:before { background: none !important; }

}

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

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

.hook-button-success() {

    border-color: transparent;

    &:before { background: none !important; }

}

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

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

.hook-button-danger() {

    border-color: transparent;

    &:before { background: none !important; }

}

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


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

.hook-button-disable() {

    border-color: transparent;

    &:before { background: none !important; }

}


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

.hook-button-link() {

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

    &:not(:disabled) {

        position: relative;
        padding-left: 0;
        padding-right: 25px;

        &:before,
        &:after {
            content: "";
            position: absolute;
            -webkit-transition: right .2s, width .2s;
            transition: right .2s, width .2s;
        }

        &:before {
            right: 7px;
            width: 7px;
            content: @button-link-icon;
            font-family: @button-link-font-family;
            font-size: 12px;
            line-height: @button-height;
        }

        &:after {
            top: 50%;
            right: 8px;
            width: 12px;
            height: 1px;
            background: @button-link-color;
        }

        &:hover:before,
        &:focus:before { right: 0; }

        &:hover:after,
        &:focus:after {
            right: 0;
            width: 20px;
        }

    }

}


// 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;
    }

}