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

export const ContactUsRow = styled.section`
    margin-top: -50px;
    iframe{
        height: 465px;
    }
    .social-card{
        border-radius: 36px;
        position: relative;
        z-index: 1;
    }
    .social-card-list{
        display: flex;
        justify-content: center;
    }
    .contact-form{
        max-width: 940px;
        margin: 60px auto 0;
        position: relative;
        z-index: 1;
    }
    .contact-bottom-group{
        margin-top: -92px;
        .map-frame{
            iframe{
                border-radius: 23px;
                border: 2px solid ${Colors.white};
            }
        }
    }
    .contact-list{
        align-items: flex-start;
        grid-gap: 92px;
        margin-top: 80px;
        li{
            display: flex;
            align-items: center;
            flex-direction: column;
            text-align: center;
            span{
                margin-bottom: 30px;
            }
            h4{
                margin: 25px 0 0;
            }
            p{
                display: none;
            }
            .link{
                font-size: 20px;
                color: ${Colors.body};
                background: transparent;
                border: none;
                padding: 0;
                &:hover{
                    color: ${Colors.primary};
                }
            }
            &.address{
                p{
                    display: block;
                    color: ${Colors.body};
                }
                .link{
                    display: none;
                }
            }
        }
    }
   
    @media ${device.laptop}{
        .social-card-list{
            grid-gap: 40px;
            li {
                a{
                    width: 60px;
                    height: 60px;
                    svg{
                        width: 34px;
                        height: 34px;
                    }
                }
            }
        }
        .contact-bottom-group{
            margin-top: -65px;
        }
        .contact-list{
            margin-top: 40px;
            grid-gap: 70px;
        }
    }

    @media ${device.laptopS}{
        .contact-form,
        .contact-bottom-group{
            margin-top: 40px;
        }
    }

    @media ${device.tablet}{
        .social-card-list {
            grid-gap: 24px;
            li {
                a{
                    width: 46px;
                    height: 46px;
                    svg{
                        width: 28px;
                        height: 28px;
                    }
                }
            }
        }
        .contact-list {
            grid-gap: 30px;
            li {
                img{
                    width: 44px;
                }
                h4{
                    margin-top: 16px;
                }
                span{
                    margin-bottom: 16px;
                }
                .link{
                    font-size: 16px;
                }
            }
        }
    }
    @media ${device.mobile}{
        .social-card{
            border-radius: 25px;
            padding: 16px;
        }
        .social-card-list {
            grid-gap: 16px;
            li {
                a {
                    width: 38px;
                    height: 38px;
                    svg{
                        width: 22px;
                        height: 22px;
                    }
                }
            }
        }
        .contact-list {
            flex-wrap: wrap;
            align-items: stretch;
            grid-gap: 0;
            margin-bottom:-16px;
            li{
                width: 50%;
                padding: 0 10px 16px;
            }
        }
    }
    @media ${device.mobileS}{
        margin-top: -26px;
        .contact-list {
            li{
                width: 100%;
            }
        }
        .social-card-list{
            grid-gap: 10px;
        }
        iframe{
            height: 250px;
        }
    }
`;