@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 li {
        margin: 0 1px;
    }

    & 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;
        }
    }
    
    
}