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


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

//
// New
//

@pagination-item-min-width:                     0;
@pagination-item-padding-vertical:              0;
@pagination-item-padding-horizontal:            0;
@pagination-item-line-height:                   @global-line-height;
@pagination-item-background:                    transparent;
@pagination-item-hover-background:              transparent;
@pagination-item-active-background:             transparent;
@pagination-item-disabled-background:           transparent;

@internal-pagination-item-mode:                 none; // none, flicker


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

.hook-pagination() {}


// Items
// ========================================================================

.hook-pagination-item() {
    box-sizing: border-box;
    min-width: @pagination-item-min-width;
    padding: @pagination-item-padding-vertical @pagination-item-padding-horizontal;
    background: @pagination-item-background;
    line-height: @pagination-item-line-height;
    text-align: center;
    transition: 0.1s ease-in-out;
    transition-property: color, background-color, border-color, box-shadow;
}

.hook-pagination-item-hover() { background-color: @pagination-item-hover-background; }

.hook-pagination-item-active() { background-color: @pagination-item-active-background; }

.hook-pagination-item-disabled() { background-color: @pagination-item-disabled-background; }

// Mode
.hook-pagination-item-hover() when (@internal-pagination-item-mode = flicker) {
    animation: uk-flicker 0.2s ease both;
}


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

.hook-pagination-misc() {}


// Inverse
// ========================================================================

@inverse-pagination-item-background:                    transparent;
@inverse-pagination-item-hover-background:              transparent;
@inverse-pagination-item-active-background:             transparent;
@inverse-pagination-item-disabled-background:           transparent;

.hook-inverse-pagination-item() { background-color: @inverse-pagination-item-background; }
.hook-inverse-pagination-item-hover() { background-color: @inverse-pagination-item-hover-background; }
.hook-inverse-pagination-item-active() { background-color: @inverse-pagination-item-active-background; }
.hook-inverse-pagination-item-disabled() { background-color: @inverse-pagination-item-disabled-background; }