// Name:            Pagination
// Description:     Component to create a page navigation
//
// Component:       `ui-pagination`
//
// Adopted:         `ui-pagination-next`
//                  `ui-pagination-previous`
//
// States:          `ui-active`
//                  `ui-disabled`
//
// ========================================================================


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

@pagination-margin-horizontal:                  20px;

@pagination-item-color:                         @global-muted-color;
@pagination-item-hover-color:                   @global-color;
@pagination-item-hover-text-decoration:         none;
@pagination-item-active-color:                  @global-color;
@pagination-item-disabled-color:                @global-muted-color;


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

/*
 * 1. Allow items to wrap into the next line
 * 2. Gutter
 * 3. Reset list
 */

.ui-pagination {
    display: flex;
    /* 1 */
    flex-wrap: wrap;
    /* 2 */
    margin-left: -@pagination-margin-horizontal;
    /* 3 */
    padding: 0;
    list-style: none;
    .hook-pagination;
}

/*
 * 1. Space is allocated solely based on content dimensions: 0 0 auto
 * 2. Gutter
 * 3. Create position context for dropdowns
 */

.ui-pagination > * {
    /* 1 */
    flex: none;
    /* 2 */
    padding-left: @pagination-margin-horizontal;
    /* 3 */
    position: relative;
}


/* Items
 ========================================================================== */

/*
 * 1. Prevent gap if child element is `inline-block`, e.g. an icon
 * 2. Style
 */

.ui-pagination > * > * {
    /* 1 */
    display: block;
    /* 2 */
    color: @pagination-item-color;
    .hook-pagination-item;
}

/* Hover + Focus */
.ui-pagination > * > :hover,
.ui-pagination > * > :focus {
    color: @pagination-item-hover-color;
    text-decoration: @pagination-item-hover-text-decoration;
    .hook-pagination-item-hover;
}

/* Active */
.ui-pagination > .ui-active > * {
    color: @pagination-item-active-color;
    .hook-pagination-item-active;
}

/* Disabled */
.ui-pagination > .ui-disabled > * {
    color: @pagination-item-disabled-color;
    .hook-pagination-item-disabled;
}


// Hooks
// ========================================================================

.hook-pagination-misc;

.hook-pagination() {}
.hook-pagination-item() {}
.hook-pagination-item-hover() {}
.hook-pagination-item-active() {}
.hook-pagination-item-disabled() {}
.hook-pagination-misc() {}


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

@inverse-pagination-item-color:                @inverse-global-muted-color;
@inverse-pagination-item-hover-color:          @inverse-global-color;
@inverse-pagination-item-active-color:         @inverse-global-color;
@inverse-pagination-item-disabled-color:       @inverse-global-muted-color;

.hook-inverse() {

    .ui-pagination > * > * {
        color: @inverse-pagination-item-color;
        .hook-inverse-pagination-item;
    }

    .ui-pagination > * > :hover,
    .ui-pagination > * > :focus {
        color: @inverse-pagination-item-hover-color;
        .hook-inverse-pagination-item-hover;
    }

    .ui-pagination > .ui-active > * {
        color: @inverse-pagination-item-active-color;
        .hook-inverse-pagination-item-active;
    }

    .ui-pagination > .ui-disabled > * {
        color: @inverse-pagination-item-disabled-color;
        .hook-inverse-pagination-item-disabled;
    }

}

.hook-inverse-pagination-item() {}
.hook-inverse-pagination-item-hover() {}
.hook-inverse-pagination-item-active() {}
.hook-inverse-pagination-item-disabled() {}