@import '../../style/variables.scss';

.contact-list{
    li{
        margin-bottom: 10px;
        @media only screen and (min-width: 640px) {
            margin-bottom: 16px;
        }
        @media only screen and (min-width: 1200px) {
            margin-bottom: 20px;
        }
        @media only screen and (min-width: 1440px) {
            margin-bottom: 30px;
        }
        &:last-child{
            margin: 0;
        }
        .link{
            color: $darkGrey;
            word-break: break-word;
            br{
                display: none;
                @media only screen and (min-width: 640px) {
                    display: block;
                }
            }
            .icon{
                min-width: 30px;
                min-height: 30px;
                border: 1px solid $mainBorder;
                transition: all 0.4s;
                @media only screen and (min-width: 1200px) {
                    width: 40px;
                    height: 40px;
                }
                @media only screen and (min-width: 1440px) {
                    width: 50px;
                    height: 50px;
                }
            }
            i{
                font-size: 18px;
                color: $primary;
                @media only screen and (min-width: 1200px) {
                    font-size: 22px;
                }
                @media only screen and (min-width: 1440px) {
                    font-size: 30px;
                }
                i{
                    transition: all 0.4s;
                }
            }
            &:hover{
                color: $primary;
                .icon{
                    background: $primary;
                    border-color: $primary;
                    transition: all 0.4s;
                }
                i{
                    &::before{
                        color: $white;
                        transition: all 0.4s;
                    }
                }
            }
        }
    }
}