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

//
// Component: Pagination
//
// ========================================================================


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

@pagination-font-size:                          13px;
@pagination-margin-left:                        5px;
@pagination-padding-vertical:                   5px;
@pagination-padding-horizontal:                 @pagination-padding-vertical;
@pagination-line-height:                        30px;

@pagination-background:                         rgba(0,0,0,0);
@pagination-color:                              @global-color;

@pagination-hover-background:                   @global-light-background;
@pagination-hover-color:                        @global-highlight-color;

@pagination-onclick-background:                 @global-primary-background;
@pagination-onclick-color:                      @global-contrast-color;

@pagination-active-background:                  @global-primary-background;
@pagination-active-color:                       @pagination-onclick-color;

@pagination-disabled-background:                rgba(0,0,0,0);
@pagination-disabled-color:                     @global-muted-color;

//
// New
//

@pagination-border-radius:                      ((@pagination-line-height + (@pagination-padding-vertical * 2)) / 2);
@pagination-border-width:                       @global-border-width;

@pagination-text-transform:                     @global-text-transform;
@pagination-letter-spacing:                     @global-letter-spacing;

@pagination-effect-width:                      70px;
@pagination-effect-background:                 fade(@pagination-onclick-background, 15%);


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

//
// Items
//

.hook-pagination-item() {
    border-radius: @pagination-border-radius;
    text-transform: @pagination-text-transform;
    -webkit-transition: @global-transition;
    transition: @global-transition;

}

// Link

.hook-pagination-link() {

    position: relative;

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

}

.hook-pagination-link-hover() {}

.hook-pagination-link-active() {}

// Active

.hook-pagination-active() {}

// Disabled
.hook-pagination-disabled() {}


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

.hook-pagination-misc() {

    // Effect on click event 'uk-ripple'
    .uk-pagination > li > a:active::after {
        -webkit-animation: @global-ripple-animation;
        animation: @global-ripple-animation;
    }

    // Next + previous items
    .uk-pagination-next > *,
    .uk-pagination-previous > * {
        padding: @pagination-padding-vertical @pagination-border-radius !important;
        letter-spacing: @pagination-letter-spacing;
    }

}
