@import '../app.module.scss';

.WishlistComp {
    .UserMainProCard {
        width: auto;
        height: 320px;
        border-radius: 3px;
        position: relative;

        .UserMainProimgDiv {
            height: 170px;
            text-align: center;
            padding-top: 10px;
            border-radius: 3px;
            width: auto;
            background: $MainBgGray;

            @media only screen and (max-width: 450px) {
                height: 160px;
            }

            @media only screen and (max-width: 335px) {
                height: 140px;
            }

            img {
                width: auto;
                height: auto;
                max-width: 150px;
                max-height: 150px;

                @media only screen and (max-width: 450px) {
                    max-width: 130px;
                    max-height: 130px;
                }

                @media only screen and (max-width: 335px) {
                    max-width: 110px;
                    max-height: 110px;
                }
            }

            .offerGreen {
                position: absolute;
                left: 6%;
                top: 6%;
                background: $Main2ndGreen;
                color: white;
                border: none;
                font-size: small;
                width: 3em;
                border-radius: 3px;
                cursor: text;
            }
        }

        .cartBtn {
            color: #333;
            border: 1px solid $MainLtGrey;
            background: white;
            position: absolute;
            right: 10%;
            top: 10%;
            border-radius: 50%;
            width: 35px;
            height: 35px;
            display: none;

            &:hover {
                color: $MainGreen;
                border: 1px solid $MainGreen;
            }
        }

        .QuickViewDiv {
            background: $Main2ndGreen;
            height: 45px;
            position: absolute;
            width: 100%;
            top: 40%;
            font-size: small;
            border: none;
            display: none;

            @media only screen and (max-width: 450px) {
                top: 36%;
            }

            @media only screen and (max-width: 335px) {
                top: 30%;
            }
        }

        .RemoveBtn {
            width: 100%;
            height: 35px;
            background: $MainBLack;
            border: 3px solid $MainBLack;
            color: white;
            border-radius: 3px;
            font-weight: bold;
            text-transform: uppercase;
            transition: all .5s ease-in-out;
            -moz-transition: all .5s ease-in-out;

            &:hover {
                background: white;
                color: $MainBLack;
            }
        }

        &:hover .cartBtn {
            display: block;
        }

        &:hover .QuickViewDiv {
            display: block;
        }
    }
}