@import (once) "../../include/vars";
@import (once) "../../include/mixins";

:root {
    --pagination-page-item-background: var(--default-background);
    --pagination-page-item-color: var(--default-color);
    --pagination-page-item-background-hover: #e4e4e4;
    --pagination-page-item-color-hover: var(--default-color);
    --pagination-page-item-background-disabled: var(--default-background-disabled);
    --pagination-page-item-color-disabled: var(--default-color-disabled);
    --pagination-page-item-background-active: rgba(217, 217, 217, 0.44);
    --pagination-page-item-color-active: var(--default-color);
    --pagination-page-item-border-color: var(--border-color);
    --pagination-page-item-border-radius: 4px;
}

.dark-side {
    --pagination-page-item-background: var(--default-background);
    --pagination-page-item-color: var(--default-color);
    --pagination-page-item-background-hover: rgba(106, 106, 106, 0.44);
    --pagination-page-item-color-hover: var(--default-color);
    --pagination-page-item-background-disabled: var(--default-background-disabled);
    --pagination-page-item-color-disabled: var(--default-color-disabled);
    --pagination-page-item-background-active: rgba(106, 106, 106, 0.44);
    --pagination-page-item-color-active: var(--default-color);
    --pagination-page-item-border-color: var(--border-color);
    --pagination-page-item-border-radius: 6px;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    list-style: none inside;
    margin: 0 -.25rem 1rem -.25rem;
    padding: 0;
    user-select: none;
}

.pagination {
    gap: 6px;

    .page-item {
        cursor: pointer;
        display: list-item;
        background-color: var(--pagination-page-item-background);
        color: var(--pagination-page-item-color);
        border: 1px solid var(--pagination-page-item-border-color);
        border-radius: var(--pagination-page-item-border-radius);
        //transition: @transition-short;
        overflow: hidden;
    }

    .page-link {
        display: block;
        position: relative;
        padding: .5rem .75rem;
        line-height: 1;
        font-size: 1rem;
        text-decoration: none;
        color: inherit;
        background-color: inherit;
    }

    .page-item, .page-item.service {
        @media (hover: hover) {
            &:hover {
                background-color: var(--pagination-page-item-background-hover);
                color: var(--pagination-page-item-color-hover);
            }
        }
        @media (hover: hover) {
            &:active {
                background-color: var(--pagination-page-item-background-hover);
                color: var(--pagination-page-item-color-hover);
            }
        }
    }

    .page-item.no-link {
        pointer-events: none;
        cursor: default;
        border-color: @transparent;

        @media (hover: hover) {
            &:hover {
                background-color: var(--pagination-page-item-background);
                color: var(--pagination-page-item-color);
                border-color: @transparent;
            }
        }

        @media (hover: none) {
            &:active {
                background-color: var(--pagination-page-item-background);
                color: var(--pagination-page-item-color);
                border-color: @transparent;
            }
        }
    }

    .page-item.disabled {
        pointer-events: none;
        background-color: var(--pagination-page-item-background-disabled);
        color: var(--pagination-page-item-color-disabled);
    }

    .page-item.active {
        background-color: var(--pagination-page-item-background-active);
        color: var(--pagination-page-item-color-active);
    }

    &.rounded {
        .page-item {
            border-radius: var(--pagination-page-item-border-radius);
        }
    }
}

.pagination {
    &.no-gap {
        gap: 0;
        .page-item {
            margin: -1px;
        }
        .no-link {
            margin:  -1px 1px;
        }

        &.rounded {
            .page-item {
                border-radius: 0;
            }

            .page-item:first-child {
                border-top-left-radius:  var(--pagination-page-item-border-radius);
                border-bottom-left-radius:  var(--pagination-page-item-border-radius);
            }
            .page-item:last-child {
                border-top-right-radius:  var(--pagination-page-item-border-radius);
                border-bottom-right-radius:  var(--pagination-page-item-border-radius);
            }
        }
    }
}

.pagination {
    &.size-large {
        .page-link {
            padding: .75rem 1.5rem;
            font-size: 1.25rem;
        }
    }

    &.size-small {
        .page-link {
            padding: .25rem .5rem;
            font-size: .875rem;
        }
    }
}

.short-pagination {
    display: flex;
    gap: 6px;
}

each(@normalColors, {
    @lightColor: "light-@{value}";
    @activeColor: "sat-@{value}";
    
    .pagination.@{value} {
        background: transparent;
        .page-item {
            --pagination-page-item-background: @@lightColor;
            --pagination-page-item-color: @@activeColor;
            --pagination-page-item-border-color: @@activeColor;
            
            @media (hover: hover) {
                &:hover {
                    --pagination-page-item-background-hover: @@activeColor;
                    --pagination-page-item-color-hover: #ffffff;
                }
            }
            
            @media (hover: none) {
                &:active {
                    --pagination-page-item-background-hover: @@activeColor;
                    --pagination-page-item-color-hover: #ffffff;
                }
            }
            
            &.active {
                --pagination-page-item-background-active: @@activeColor;
                --pagination-page-item-color-active: #ffffff;
            }
        }
    }
})