import { styled } from "styled-components";
import { device } from "@/app/components/common/Devices";
import { Colors, Gradient } from "@/app/components/common/variable";


export const CompliancesSection = styled.section`
    /* .compliance-wrap{
        @media ${device.mobile}{
            .compliance-content-col{
                margin-top: 30px;
            }
        }
        .nav-pills{
            row-gap:30px;
            flex-direction:column;
            .nav-item{
                .nav-link{
                    font-size:32px;
                    line-height:1.2;
                    color:#222222;
                    background: ${Gradient.primary};
                    padding: 29px 52px;
                    border-radius:60px;
                    display:block;
                    font-weight:600;
                    transition:0.3s all ease;
                    &:hover,&.active{
                        background: ${Colors.primary};
                        color:${Colors.white};
                    }
                    @media ${device.laptop}{
                        font-size:26px;
                        padding:30px 40px;
                    }
                    @media ${device.laptopS}{
                        font-size:22px;
                        padding:26px 36px;
                    }
                    @media ${device.tablet}{
                        font-size:20px;
                        padding:24px 30px;
                    }
                    @media ${device.mobile}{
                        padding: 18px 24px;
                        font-size: 18px;
                    }
                    @media ${device.mobileS}{
                        padding: 16px 20px;
                        font-size: 16px;
                    }
                }
            }
            @media ${device.mobile}{
                flex-direction:row;
                row-gap:20px;
                column-gap:20px;
            }
            @media ${device.mobileS}{
                row-gap:16px;
                column-gap:16px;
            }
            
        }
        .tab-content{
            background: #F9F9F9;
            padding:48px;
            border-radius:36px;
            height:100%;
            font-size:20px;
            line-height:1.4;
            .tab-pane{
                max-height:580px;
                overflow:auto;
                padding-right: 17px;
                scrollbar-color: transparent;
                scrollbar-width: none;
                @media ${device.laptop}{
                    max-height:490px;
                }
                @media ${device.laptopS}{
                    max-height:438px;
                }
                &::-webkit-scrollbar{
                    width:0;
                }
                ul{
                    list-style:disc;
                    row-gap:20px;
                    display:inline-grid;
                    padding-left: 22px;
                    @media ${device.mobileS}{
                        row-gap:16px;
                    }
                }
                @media ${device.mobile}{
                    max-height:none;
                }
            }
            @media ${device.tablet}{
                padding:30px;
            }
            @media ${device.mobile}{
                font-size:18px;
                padding:24px;
                border-radius:26px;
            }
            @media ${device.mobileS}{
                font-size:16px;
                padding:16px;
            }
        }
        &.skeleton-row{
            .nav-pills {
                .nav-item {
                    .nav-link{
                        background: transparent;
                        position: relative;
                        overflow: hidden;
                        span{
                            position: absolute;
                            top: 0;
                            left: 0;
                            display: block;
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
            .tab-content{
                background: transparent;
                position: relative;
                overflow: hidden;
                span{
                    position: absolute;
                    top: 0;
                    left: 0;
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
        }
    } */
    .compliance-wrap{
        @media ${device.mobile}{
            .compliance-content-col{
                margin-top: 30px;
            }
        }
        .nav-pills{
            row-gap:30px;
            flex-direction:column;
            .nav-item{
                .nav-link{
                    font-size:32px;
                    line-height:1.2;
                    color:#222222;
                    background: ${Gradient.primary};
                    padding: 29px 52px;
                    border-radius:60px;
                    display:block;
                    font-weight:600;
                    transition:0.3s all ease;
                    &:hover,&.active{
                        background: ${Colors.primary};
                        color:${Colors.white};
                    }
                    @media ${device.laptop}{
                        font-size:26px;
                        padding:30px 40px;
                    }
                    @media ${device.laptopS}{
                        font-size:22px;
                        padding:26px 36px;
                    }
                    @media ${device.tablet}{
                        font-size:20px;
                        padding:24px 30px;
                    }
                    @media ${device.mobile}{
                        padding: 18px 24px;
                        font-size: 18px;
                    }
                    @media ${device.mobileS}{
                        padding: 16px 20px;
                        font-size: 16px;
                    }
                }
            }
            @media ${device.mobile}{
                flex-direction:row;
                row-gap:20px;
                column-gap:20px;
            }
            @media ${device.mobileS}{
                row-gap:16px;
                column-gap:16px;
            }
            
        }
        .tab-content{
            background: #F9F9F9;
            padding:48px;
            border-radius:36px;
            height:100%;
            font-size:20px;
            line-height:1.4;
            .tab-pane{
                max-height:580px;
                overflow:auto;
                padding-right: 17px;
                scrollbar-color: transparent;
                scrollbar-width: none;
                @media ${device.laptop}{
                    max-height:490px;
                }
                @media ${device.laptopS}{
                    max-height:438px;
                }
                &::-webkit-scrollbar{
                    width:0;
                }
                ul{
                    list-style:disc;
                    row-gap:20px;
                    display:inline-grid;
                    padding-left: 22px;
                    @media ${device.mobileS}{
                        row-gap:16px;
                    }
                }
                @media ${device.mobile}{
                    max-height:none;
                }
            }
            @media ${device.tablet}{
                padding:30px;
            }
            @media ${device.mobile}{
                font-size:18px;
                padding:24px;
                border-radius:26px;
            }
            @media ${device.mobileS}{
                font-size:16px;
                padding:16px;
            }
        }
        .compliance-list-col{
            max-height: 620px;
            overflow-y: auto;
            scrollbar-color: transparent;
            scrollbar-width: none;
            @media ${device.laptop}{
                max-height: 600px;
            }
            @media ${device.laptopS}{
                max-height: 420px;
            }
            @media ${device.tablet}{
                max-height: 400px;
            }
            @media ${device.mobile}{
                max-height: 290px;
            }
            &::-webkit-scrollbar{
                width: 0;
                height: 0;
                background-color:  transparent;
                border-radius: 8px;
            }
            &::-webkit-scrollbar-thumb{
                background: transparent;
                border-radius: 8px;
            }
            &::-webkit-scrollbar-track{
                background: transparent;
            }
        }
        &.skeleton-row{
            .nav-pills {
                .nav-item {
                    .nav-link{
                        background: transparent;
                        position: relative;
                        overflow: hidden;
                        span{
                            position: absolute;
                            top: 0;
                            left: 0;
                            display: block;
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
            .tab-content{
                background: transparent;
                position: relative;
                overflow: hidden;
                span{
                    position: absolute;
                    top: 0;
                    left: 0;
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
`;