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


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

@pagination-line-height:                        @global-line-height;
@pagination-background:                         @global-default-background;
@pagination-color:                              @global-color;
@pagination-hover-background:                   @global-default-hover-background;
@pagination-hover-color:                        @global-color;
@pagination-onclick-background:                 @global-default-active-background;
@pagination-onclick-color:                      @global-color;

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

@pagination-disabled-background:                #fafafa;
@pagination-disabled-color:                     @global-muted-color;

//
// New
//

@pagination-border:                             rgba(0,0,0,0.2);
@pagination-border-bottom:                      rgba(0,0,0,0.3);
@pagination-active-border:                      rgba(0,0,0,0.2);
@pagination-active-border-bottom:               rgba(0,0,0,0.4);
@pagination-text-shadow:                        @global-text-shadow;

@pagination-contrast-text-shadow:               @global-contrast-text-shadow;

@pagination-gradient-top:                       @global-default-gradient-top;
@pagination-gradient-bottom:                    @global-default-gradient-bottom;

@pagination-primary-gradient-top:               @global-primary-gradient-top;
@pagination-primary-gradient-bottom:            @global-primary-gradient-bottom;


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

//
// Items
//

.hook-pagination-item() { border-radius: @global-border-radius; }

//
// Link
// 1. `background-origin` is needed to prevent the background-image gradients from repeating under the border
//

.hook-pagination-link() {
    border: 1px solid @pagination-border;
    border-bottom-color: @pagination-border-bottom;
    background-origin: border-box; // 1
    background-image: -webkit-linear-gradient(top, @pagination-gradient-top, @pagination-gradient-bottom);
    background-image: linear-gradient(to bottom, @pagination-gradient-top, @pagination-gradient-bottom);
    text-shadow: 0 1px 0 @pagination-text-shadow;
}

.hook-pagination-link-hover() { background-image: none; }

.hook-pagination-link-active() {
    border-color: @pagination-border;
    border-top-color: @pagination-border-bottom;
    background-image: none;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

//
// Active
// 1. `background-origin` is needed to prevent the background-image gradients from repeating under the border
//

.hook-pagination-active() {
    border: 1px solid @pagination-active-border;
    border-bottom-color: @pagination-active-border-bottom;
    background-origin: border-box; // 1
    background-image: -webkit-linear-gradient(top, @pagination-primary-gradient-top, @pagination-primary-gradient-bottom);
    background-image: linear-gradient(to bottom, @pagination-primary-gradient-top, @pagination-primary-gradient-bottom);
    text-shadow: 0 -1px 0 @pagination-contrast-text-shadow;
}

// Disabled
.hook-pagination-disabled() {
    border: 1px solid @pagination-border;
    text-shadow: 0 1px 0 @pagination-text-shadow;
}


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

.hook-pagination-misc() {}