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

.edit-profile{
    .user-profile{
        .users-image{
            width: 150px;
            height: 150px;
            margin-bottom: 30px;
            position: relative;
            flex-shrink: 0;
            background-color: rgba($color: $primary, $alpha: 0.2);
            @media only screen and (min-width: 768px){
                width: 160px;
                height: 160px;
            }
            @media only screen and (min-width: 1200px){
                width: 220px;
                height: 220px;
            }
            @media only screen and (min-width: 1600px){
                width: 271px;
                height: 271px;
            }
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                // border-radius: 100%;
            }
        }
        .edit-profile-label{
            position: absolute;
            right: 0px;
            bottom: 0px;
            color: $white;
            width: 40px;
            height: 40px;
            border-radius: 100%;
            background: $primary;
            overflow: hidden;
            left: 50%;
            transform: translateX(-50%);
            bottom: -20px;
            box-shadow: 0px 4px 4px 0px #00000040;
            @media only screen and (min-width: 768px){
                width: 45px;
                height: 45px;
                bottom: -20px;
            }
            @media only screen and (min-width: 1600px){
                // right: 16px;
                // bottom: 16px;
                width: 50px;
                height: 50px;   
                bottom: -26px;
            
            }
            input{
                position: absolute;
                left: 0;
                top: 0;
                padding: 0;
                width: 100%;
                height: 100%;
                cursor: pointer;
                opacity: 0;
                z-index: 1;
                border-radius: 100%;
            }
            i{
                font-size: 16px;
                @media only screen and (min-width: 768px){
                    font-size: 20px;
                }
                @media only screen and (min-width: 1200px){
                    font-size: 24px;
                }
                &::before{
                    background-color: $white;
                }
                &.ns-icon{
                    width: 20px;
                    height: 20px;
                    mask-size: contain;
                    @media only screen and (min-width: 1200px){
                        width: 22px;
                        height: 22px;    
                    }
                    @media only screen and (min-width: 1600px){
                        width: 24px;
                        height: 24px;    
                    } 
                }
            }
            input[type=file]::-webkit-file-upload-button {
                cursor: pointer;
            }
            &:hover{
                border-color: $tertiary;
                color: $white;
                i{
                    color: $white;
                }
            }
            
        }
    }
    .ns-profile-content-wrapper{
        gap: 24px;
        @media only screen and (max-width: 991px){
            flex-direction: column;
        }
        @media only screen and (min-width: 1441px){
            gap: 40px;
        }
        .ns-profile-image-box{

        }
        .ns-edit-profile-content{

        }
    }
    .react-datepicker-wrapper .react-datepicker__input-container .date-btn{
        &::before{
            mask-image: url('../../../../../../public/assets/ns-icons/calendar-icon.svg');
        }
    }
}