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