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

//
// Component: Icon
//
// ========================================================================


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

@icon-hover-color:                              @global-muted-color;
@icon-hover-hover-color:                        @global-highlight-color;

@icon-button-width:                             42px;
@icon-button-height:                            @icon-button-width;
@icon-button-border-radius:                     50%;
@icon-button-font-size:                         20px;

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

//
// New
//

@icon-button-margin-horizontal:                 4px;

@icon-button-effect-width:                      70px;
@icon-button-effect-background:                 fade(@icon-button-active-background, 15%);


// Modifier: `uk-icon-hover`
// ========================================================================

.hook-icon-hover() {
    -webkit-transition: color 0.15s ease-in-out;
    transition: color 0.15s ease-in-out;
}

.hook-icon-hover-hover() {}


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

.hook-icon-button() {

    position: relative;
    margin: @icon-button-margin-horizontal;
    overflow: visible;
    -webkit-transition: @global-transition;
    transition: @global-transition;
    -webkit-tap-highlight-color: rgba(0,0,0,0);

    // Effect style
    &::after {
        position: absolute;
        top: 50%;
        left: 50%;
        content: '';
        margin: -(@icon-button-effect-width / 2) 0 0 -(@icon-button-effect-width / 2);
        width: @icon-button-effect-width;
        height: @icon-button-effect-width;
        border-radius: 50%;
        background: @icon-button-effect-background;
        opacity: 0;
    }

}

// Hover
.hook-icon-button-hover() {}

// Active
.hook-icon-button-active() {}


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

.hook-icon-misc() {

    // Effect on click event 'uk-ripple'
    .uk-icon-button:active::after {
        -webkit-animation: @global-ripple-animation;
        animation: @global-ripple-animation;
    }

}
