/* Pagination style */

.pagination {
    padding: 10px;
	background: #F4F7FE;
	text-align: center;
    &__flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    &__para {
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        margin: 0;
        padding: 0;
    }
    &_list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        &__item {
            &:hover {
                .pagination_list {
                    &__item {
                        &__link {
                            background-color: var(--hex-main-color-one);
                            border-color: var(--hex-main-color-one);
                            color: var(--hex-white-text);
                        }
                    }
                }
            }
            &.active {
                .pagination_list {
                    &__item {
                        &__link {
                            background-color: var(--hex-main-color-one);
                            border-color: var(--hex-main-color-one);
                            color: var(--hex-white-text);
                        }
                    }
                }
            }
            &__button {
                cursor: pointer;
                display: inline-block;
                font-size: 14px;
                color: var(--hex-paragraph-color);
                border: 1px solid var(--hex-border-color);
                line-height: 1;
                padding: 7px 12px;
                -webkit-transition: 0.3s;
                transition: 0.3s;
                &:hover {
                    background-color: var(--hex-main-color-one);
                    border-color: var(--hex-main-color-one);
                    color: var(--hex-white-text);
                }
            }
            &__link {
                cursor: pointer;
                display: inline-block;
                font-size: 14px;
                color: var(--hex-paragraph-color);
                border: 1px solid var(--hex-border-color);
                background-color: var(--hex-white-text);
                line-height: 1;
                padding: 7px 12px;
                -webkit-transition: 0.3s;
                transition: 0.3s;
            }
        }
    }
	li {
		padding: 6px 12px;
		border-radius: 4px;
		display: inline-block;
		&.active {
			background: #ffffff;
			border: 1px solid #A760FE;
			a {
				color: #A760FE;
			}
		}
		a {
			color: #1D2939;
		}
	}
}