import { styled } from "styled-components";
import { Colors } from "../common/variable";
import { device } from "../common/Devices";

export const PaginationRow = styled.div`
    .pagination{
        display: flex;
        align-items: center;
        justify-content: center;
        grid-gap: 10px;
        .page-item{
            display: inline-block;
            .page-link{
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 16px;
                line-height: 1;
                font-weight: 600;
                width: 46px;
                height: 46px;
                border-radius: 100%;
                padding: 0;
                background: transparent;
                border-color: #dfdfdf;
                color: ${Colors.body};
                box-shadow: none;
                transition: all 0.4s;
            }
            &:hover,&.active{
                .page-link{
                    background: ${Colors.primary};
                    color: ${Colors.white};
                    border-color: ${Colors.primary};
                    transition: all 0.4s;
                }
            }
            &.pagination-dot{
                .page-link{
                    background: transparent;
                    color: ${Colors.body};
                    border-color: transparent;
                    border-radius: 0;
                    width: 20px;
                }
            }
            &.previous,&.next{
                .page-link{
                    font-size: 30px;
                    line-height: 1.5;
                    font-weight: 400;
                    padding-bottom: 6px;
                    &:hover{
                        background: ${Colors.primary};
                        color: ${Colors.white};
                    }
                }
            }
        }
        
    }

    @media ${device.mobile}{
        .pagination {
            .page-item {
                .page-link{
                    font-size: 14px;
                    width: 30px;
                    height: 30px;
                }
                &.previous, &.next {
                    .page-link{
                        font-size: 24px;
                    }
                }
                &.pagination-dot {
                    .page-link{
                        width: 6px;
                    }
                }
            }
        }
    }
    @media ${device.mobileS}{
        .pagination {
            grid-gap: 6px;
            .page-item {
                .page-link{
                    font-size: 12px;
                    width: 24px;
                    height: 24px;
                }
            }
        }
    }
`