@use "base/variables" as v;
@use "base/mixins" as m;

.products {
    .box-container {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;

        .box {
            margin: 1rem; 
            flex: 1 1 30rem;
            box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1);
            border-radius: .5rem;
            border: .1rem solid v.$grisClaro;
            position: relative;

            .discount {
                position: absolute;
                top: 1rem;
                right: 1rem;
                background: rgba(255, 51, 153, .1);
                color: v.$rosa;
                padding: .7rem 1rem;
                z-index: 1;
                border-radius: .5rem;
            }

            .image {
                position: relative;
                text-align: center;
                padding-top: 2rem;
                overflow: hidden;

                img {
                    height: 25rem;
                    transition: transform 0.5s ease; // This is the time it takes to zoom in the image
                }

                .icons {
                    position: absolute;
                    bottom: -7rem;
                    left: 0;
                    right: 0;
                    display: flex;

                    a {
                        height: 5rem;
                        line-height: 5rem;
                        font-size: 2rem;
                        width: 60%;
                        background: v.$rosa;
                        color: v.$blanco;
                        transition: background 0.3s ease; // Add this line

                        svg {
                            margin-top: 1rem;
                            width: 3rem; // Reduce this value to make the SVG images smaller
                            height: 3rem; // Reduce this value to make the SVG images smaller
                            transition: transform 0.3s ease; // Makes the SVG images move up when hovering over them
                        }

                        &:hover {
                            background: v.$grisOscuro;

                            svg {
                                transform: translateY(-.4rem);
                            }
                        }
                    }

                    .cart-btn {
                        border-left: .1rem solid v.$gris;
                        border-right: .1rem solid v.$gris;
                        width: 100%;
                    }
                }
            }

            &:hover {
                .image {
                    img {
                        transform: scale(1.1);
                    }
                }

                .icons {
                    bottom: 0;
                }
            }

            .content {
                padding: 2rem;
                text-align: center;

                h3 {
                    font-size: 2.5rem;
                    color: v.$grisOscuro;
                }

                .price {
                    font-size: 2.5rem;
                    color: v.$rosa;
                    font-weight: v.$bold;
                    padding-top: 1rem;

                    span {
                        font-size: 1.5rem;
                        color: v.$grisOscuro;
                        font-weight: lighter;
                        text-decoration: line-through;
                    }
                }
            }
        }
    }

    .view-all {
        .boton {
            @include m.boton(v.$rosa, v.$blanco);
            border-radius: 1rem;
            margin-top: 2rem;

            transition: transform 0.3s ease;

            &:hover {
                transform: translateY(-.4rem);
            }
        }
    }
}