@import "../../style/normalize.pcss";
@import "../../style/display.pcss";

@import "../../style/mixin/typography.pcss";
@import "../../style/mixin/hover.pcss";
@import "../../style/mixin/media.pcss";
@import "../../style/control.pcss";
@import "../../style/property.pcss";



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

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

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

    }

    & ul li {

        margin: 0;
        border-left: solid 1px var(--monster-theme-control-border-color);
        padding: 0 10px;
        
        display: flex;
        align-items: center;
        justify-content: center;
        

        & a, & a:link, & a:visited, & a:hover, & a:active, & a:focus {
            width: max-content;
            color: var(--monster-theme-control-color);
            background-color: var(--monster-theme-control-bg-color);
            text-decoration: none;
            outline: none;
            padding: 0 0.4rem;
        }

        & a:hover, & a:active, & a:focus {
            outline: none;
        }

        & a:focus {
            outline: 1px dashed var(--monster-color-selection-4);
            outline-offset: 2px;
        }

        @media (prefers-color-scheme: light) {
            & a:focus {
                outline: 1px dashed var(--monster-color-selection-3);
                outline-offset: 2px;
            }
        }

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

        & a.disabled {
            cursor: not-allowed;
        }
    }

    & ul li {
        &:first-child {
            border-left: none;
        }
    }

    @mixin viewport-7 {

        & ul li {
            padding: 0 2px;
        }

        & ul li:nth-child(1) {
            display: none;
        }

        & ul li:nth-child(2) {
            display: none;
        }

        & ul li:nth-child(3) {
            border-left: none;
        }

    }


}


@container (min-width: 800px) {
    [data-monster-role=pagination] {
    }
}