@layer components {

    ul.games li,
    ul.products li {
        cursor: pointer;
        user-select: none;
    }

    .info ul {
        list-style: disc;
    }

    .games .selected {
        @apply bg-primary border-primary
    }

    .products .buy {
        display: none;
    }

    .products .selected {
        @apply bg-primary border-primary
    }

    .products .selected .buy {
        display: block;
    }

    .green {
        @apply bg-green
    }

    .yellow {
        @apply bg-yellow
    }

    .orange {
        @apply bg-orange
    }

    .red {
        @apply bg-red
    }

    .closemodal {
        opacity: 0;
    }

    @keyframes slide-down {
        from {
            transform: translate(0, -3em);
            opacity: 0;
        }

        to {
            transform: translate(0, 0);
            opacity: 100%;
        }
    }

    .slide-down {
        animation-name: slide-down;
        animation-duration: 500ms;
        animation-delay: 300ms;
        animation-fill-mode: forwards;
    }



}