lostplaces-frontend/components/01_Atoms/pagination/_pagination.scss

.LP-Pagination{
    font-family: $-primary-sans-serif-font;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    justify-content: center;

    .LP-Pagination__List{
        list-style-type: none;
        display: flex;
        flex-direction: row;
        padding-left: 0;
        padding-right: 0;
    }

    .LP-Pagination__Item{
        margin: 0 4px;
    
        &--disabled{
            color: rgb(182, 182, 182);
            .LP-Link{
                color: rgb(182, 182, 182);
                cursor: default;
                &:hover{
                    background-color: unset;
                    color: unset;
                }
            }
        }
        
        &--current{

            .LP-Link{
                background-color: $-beige;

                &:hover{
                    background-color: $-beige;
                    color: $-grey;
                }
            }
        }
    }
    
    .LP-Link{
        padding: 15px 20px;
        vertical-align: sub;
        border-radius: 2px;

        &:active, &:hover{
            background-color: $-beige;
            color: $-grey;
        }
    }

    .LP-Icon{
        font-size: larger;
    }
}

@media(max-width: $-viewport-normal){
    .LP-Pagination{
        .LP-Link{
            padding: 10px 15px;
        }
        .LP-Pagination__Item--other{
            .LP-Text{
                display: none;
            }
        }
    }
}

@media(max-width: $-viewport-small){
    .LP-Pagination{
        .LP-Pagination__Item{
            margin: 0 1px;
            .LP-Link{
                padding: 13px 16px;
            }
        }
    }
}

@media(max-width: $-viewport-extra-small){
    .LP-Pagination{
        .LP-Pagination__Item{
            .LP-Link{
                padding: 8px 11px;
            }
        }
    }
}