.pagination {
    .page-item {
        a {
            &.page-link {
                color: $body-color;
                background-color: $bg-color-1;
                border-color: $body-bg;
                transition: transform 0.5s;
                &:hover,
                &:focus {
                    background: linear-gradient(97.3deg, #ff512f 0%, #dd2476 100%);
                    border-color: $bg-color-1;
                    &::before {
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background: linear-gradient(97.3deg, #dd2476 0%, #ff512f 100%);
                        transition: transform 0.5s;
                        transform-origin: right;
                        transform: scaleX(0);
                        z-index: 0;
                        border-radius: inherit;
                    }
                }
            }
        }
    }
    .page-item.disabled .page-link {
        background-color: $bg-color-1;
        border-color: $body-bg;
        cursor: default;
    }
    .page-item.active .page-link {
        background: linear-gradient(97.3deg, #ff512f 0%, #dd2476 100%);
        border-color: $body-bg;
        cursor: default;
        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(97.3deg, #dd2476 0%, #ff512f 100%);
            transition: transform 0.5s;
            transform-origin: right;
            transform: scaleX(0);
            z-index: 0;
            border-radius: inherit;
        }
    }
}
.theme-light {
    .pagination {
        .page-item {
            a {
                &.page-link {
                    color: $body-light;
                    background-color: $body-bg-light2;
                    border-color: $body-bg-light;
                    &:hover,
                    &:focus {
                        border-color: $body-bg-light;
                        color: $body-bg-light;
                    }
                }
            }
        }
        .page-item.disabled .page-link {
            background-color: $body-bg-light2;
            border-color: $body-bg-light;
        }
        .page-item.active .page-link {
            border-color: $body-bg-light;
        }
    }
}