@import 'theme/variables.scss';

.cards-container {
    grid-template-columns: repeat(auto-fill, minmax(302px, 1fr));

    .flip-card {
        perspective: 1000px;

        .flip-card-content {
            transform-style: preserve-3d;

            &.flipped {
                transform: rotate3d(
                    var(--flip-width),
                    var(--flip-height),
                    0,
                    180deg
                );
            }
        }

        .flip-card-front,
        .flip-card-back {
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        .flip-card-front {
            transform: rotate3d(var(--flip-width), var(--flip-height), 0, 0deg);
        }

        .flip-card-back {
            transform: rotate3d(
                var(--flip-width),
                var(--flip-height),
                0,
                180deg
            );
        }

        .card-body {
            &:hover {
                .finish-order-btn {
                    background-color: $blue-11 !important;
                    color: $white !important;
                }
            }

            .card-body-left {
                width: calc(100% - 30px);
            }

            .rotate-svg {
                rotate: (180deg);
            }
        }
    }

    .blur-overlay {
        backdrop-filter: blur(1.5px);
        animation: pulse 700ms cubic-bezier(0.46, 0.03, 0.51, 0.95) infinite
            alternate;
    }

    @keyframes pulse {
        from {
            background-color: $white-7;
        }
        to {
            background-color: $white-4;
        }
    }
}