// Empty screen when no products
.o_wsale_empty_screen_container {
    --o_wsale_empty_screen_light_color: #{darken($light, 1%)};

    max-width: 650px; // Matches o-nocontent-empty's max-width

    .o_wsale_empty_screen {
        border: $border-width * 4 solid darken($primary-bg-subtle, 10%);
        border-radius: 8px 8px 0 0;

        .o_wsale_empty_screen_header, .o_wsale_skeleton_box, .o_wsale_app_icon {
            height: $spacer * 2;
        }

        button {
            --btn-padding-x: 11px;
            --btn-padding-y: #{map-get($spacers, 2)};
            --btn-font-size: var(--btn-padding-x);

            &:last-of-type {
                @include button-variant($o-enterprise-color, $o-enterprise-color);
            }
        }

        // Fake Snippet
        .o_wsale_empty_screen_content {
            height: 310px;
            background-color: var(--o_wsale_empty_screen_light_color);

            // Snippet content
            background-image:
              linear-gradient(darken($primary-bg-subtle, 10%) 100%, transparent 0), // Title
              linear-gradient(darken($primary-bg-subtle, 5%) 100%, transparent 0), // Subtitle
              linear-gradient(darken($primary-bg-subtle, 10%) 100%, transparent 0), // Button 1
              linear-gradient(darken($primary-bg-subtle, 10%) 100%, transparent 0); // Button 2

            background-size:
              60% 40px,  // Title
              20% 10px,  // Subtitle
              120px 32px, // Button 1
              120px 32px; // Button 2

            background-position:
              40px 100px, // Title
              40px 160px, // Subtitle
              130px 250px, // Button 1
              260px 250px; // Button 2

            background-repeat: no-repeat;
        }

        // Fake modal
        .o_wsale_empty_screen_modal_wrapper {
            @include o-position-absolute($top: 36px, $right: map-get($spacers, 1)); // .o_wsale_empty_screen_header height + 4px
            width: calc(100% - #{2 * map-get($spacers, 5)});

            .o_wsale_skeleton_modal {
                grid-template-columns: 1fr 1fr;
                gap: 12px;
                padding: 12px;

                .o_wsale_skeleton_box {
                    background-image:
                    linear-gradient(var(--o_wsale_empty_screen_light_color) 100%, transparent 0), // Title
                    linear-gradient(var(--o_wsale_empty_screen_light_color) 100%, transparent 0); // Subtitle

                    background-size:
                      25% 12px, // Title
                      50% 12px;  // Subtitle

                    background-position:
                      40px 4px,   // Title
                      40px 24px;  // Subtitle

                    background-repeat: no-repeat;

                    &:not(.o_wsale_app_box)::before {
                        content: "";
                        @include o-position-absolute($top: 0, $left: 0);

                        width: $spacer * 2;
                        aspect-ratio: 1;
                        background-color: var(--o_wsale_empty_screen_light_color);
                        border-radius: $border-radius;
                    }
                }

                .o_wsale_app_box {
                    width: calc(100% + #{map-get($spacers, 2)});
                    animation: itemHoverEffect 3s .4s infinite;

                    .o_wsale_app_icon {
                        aspect-ratio: 1;
                    }
                }
            }
        }

        .o_wsale_empty_screen_cursor {
            width: 24px;
            aspect-ratio: 1;
            background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.65376 12.3673H5.46026L5.31717 12.4976L0.500002 16.8829L0.500002 1.19841L11.7841 12.3673H5.65376Z" fill="black" stroke="white" stroke-width="1"/></svg>');
            animation: cursorMove 3s .4s infinite;
        }

        @keyframes cursorMove {
            0% {
              opacity: 0;
              transform: translate(340px, 100px);
            }

            20% {
              opacity: 1;
              transform: translate(340px, 100px);
            }

            35% {
              transform: translate(240px, 20px);
            }

            40% {
              transform: translate(240px, 20px) scale(0.9); // Click
            }

            45% {
              transform: translate(240px, 20px) scale(1);   // Release
            }

            85% {
              opacity: 1;
              transform: translate(240px, 20px);
            }

            100% {
              opacity: 0;
              transform: translate(240px, 20px);
            }
          }

        @keyframes itemHoverEffect {
            0%, 30% { background-color: transparent; }
            35%, 85% { background-color: var(--o_wsale_empty_screen_light_color); } // Highlight item
            100% { background-color: transparent; }
        }
    }
}