@import "../../style/normalize.pcss";
@import "../../style/display.pcss";
@import "../../style/mixin/button.pcss";
@import "../../style/button.pcss";
@import "../../style/mixin/typography.pcss";
@import "../../style/mixin/hover.pcss";
@import "../../style/control.pcss";
@import "../../style/property.pcss";
@import "../../style/ripple.pcss";


[data-monster-role=pagination] {
    @mixin text;
    display: flex;
    justify-content: center;
    box-sizing: border-box;

    & ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        list-style: none;

        padding-left: 0;
        margin: 20px 0;

    }

    & ul.pagination-no-wrap {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
    }

    & ul:not([data-monster-adaptive-ready="true"]) {
        visibility: hidden;
    }

    & ul.pagination-numbers-hidden,
    & ul.pagination-compact {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        justify-content: stretch;
        gap: 0;
        max-width: 100%;
        width: 100%;
    }

    & ul.pagination-numbers-hidden li[data-monster-role="pagination-prev"],
    & ul.pagination-compact li[data-monster-role="pagination-prev"] {
        justify-self: center;
    }

    & ul.pagination-numbers-hidden li[data-monster-role="pagination-summary"],
    & ul.pagination-compact li[data-monster-role="pagination-summary"] {
        justify-content: center;
    }

    & ul.pagination-numbers-hidden li[data-monster-role="pagination-next"],
    & ul.pagination-compact li[data-monster-role="pagination-next"] {
        justify-self: center;
    }

    & ul li {
        margin: 0 1px;
    }

    & ul.pagination-compact li {
        padding: 0 4px;
    }

    & ul.pagination-numbers-hidden li {
        padding: 0 6px;
    }

    & ul.pagination-numbers-hidden li {
        border-left: none;
    }

    & ul.pagination-compact li {
        border-left: none;
    }

    & [data-monster-role="pagination-summary"] {
        display: none;
        padding: 0 6px;
        font-size: 0.85rem;
        white-space: nowrap;
        text-align: center;
        flex: 1 1 auto;
        justify-content: center;
        align-items: center;
    }

    & ul.pagination-numbers-hidden [data-monster-role="pagination-summary"] {
        border-left: none;
    }

    & ul.pagination-compact [data-monster-role="pagination-summary"] {
        border-left: none;
    }

    & ul li a {
        @mixin button;
        background-color: var(--monster-bg-color-primary-1);
        color: var(--monster-theme-control-color);
        border-color: var(--monster-bg-color-primary-1);
        width: max-content;

        &.current {
            background-color: var(--monster-bg-color-primary-4);
            color: var(--monster-color-primary-4);
            border-color: var(--monster-bg-color-primary-4);
            cursor: unset;
        }

        &.disabled {
            background-color: var(--monster-bg-color-primary-disabled-1);
            color: var(--monster-color-primary-disabled-1);
            cursor: not-allowed;
        }
    }
    
    
}