@fast-simon/storefront-kit/dist/utils/styles/recommendationsWidgetStrStyles.d.ts

A comprehensive kit for developing storefronts with Fast Simon components, utilities, and React/Hydrogen support.

export declare const visualSimilarityStyles = "\n\n\n.fs-recommended-products-container {\n    width: 100%;\n    margin: 10px 0;\n}\n\n.fs-recommended-products-grid-container {\n    width: 100%;\n    overflow: auto hidden;\n    padding: 0 0 10px 0;\n    display: flex;\n    align-items: center;\n}\n\n.fs-recommended-products-grid {\n    grid-template-columns: repeat(var(--num-of-products), calc(calc(calc(100% / var(--mobile-breakpoint)) - var(--carousel-gap)) - 16px) );\n    display: grid;\n    grid-gap: var(--carousel-gap);\n    width: 100%;\n    max-width: -webkit-fill-available;\n}\n\n.fs-recommended-products-widget-title {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-family: Lato,sans-serif!important;\n    margin-bottom: 10px;\n}\n\n.fs-grid-arrows-container {\n    width: 100%;\n    position: relative;\n    height: 100%;\n    display: flex;\n    align-items: center;\n}\n\n.fs-arrows-container {\n    position: absolute;\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    opacity: calc(var(--num-of-products) - var(--mobile-breakpoint));\n}\n\n.fs-recommended-product {\n    display: flex;\n    overflow: hidden;\n    border-radius: 8px;\n    border: 1px solid var(--lines-disabled);\n    width: 100%;\n    height: 100%;\n    position: relative;\n    align-items: center;\n    justify-content: center;\n}\n\n.fs-recommended-product-content {\n    width: 100%;\n    height: 100%;\n    position: relative;\n}\n\n.fs-widget-arrow-left, .fs-widget-arrow-right {\n    display: flex;\n    width: 36px;\n    height: 36px;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    position: absolute;\n    z-index: 6;\n    border-radius: 200px;\n    background-color: #006CDC99;\n    transition: background-color 0.1s ease-in-out;\n    color: white;\n}\n.fs-arrow-icon {\n    height: inherit;\n    display: flex;\n    align-items: center;\n    fill: white;\n}\n\n.fs-widget-arrow-left {\n    left: 0;\n    transform: rotate(180deg);\n}\n\n.fs-widget-arrow-right {\n    right: 0;\n}\n\n.fs-recommended-product-image {\n    height: unset;\n    object-fit: cover;\n}\n\n.arrow-hide {\n    display: none;\n}\n\n.spinner-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100px;\n}\n\n.spinner {\n    border: 4px solid rgba(0, 0, 0, 0.1);\n    border-top: 4px solid #000000;\n    border-radius: 50%;\n    width: 36px;\n    height: 36px;\n    spin 0.8s cubic-bezier(0.26, 0.14, 0.59, 0.79) infinite\n}\n\n@keyframes spin {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n}\n\n@media screen and (min-width: 1024px) {\n    .fs-recommended-products-grid {\n        grid-template-columns: repeat(var(--num-of-products), calc(calc(calc(100% / var(--desktop-breakpoint)) - var(--carousel-gap)) - 16px) );\n    }\n    .fs-recommended-products-container {\n        grid-area: span 2 / span 2;\n    }\n    .fs-arrows-container {\n      opacity: calc(var(--num-of-products) - var(--desktop-breakpoint));\n    }\n}\n\n@media screen and (min-width: 720px) and (max-width: 1023px) {\n    .fs-recommended-products-grid {\n        grid-template-columns: repeat(var(--num-of-products), calc(calc(calc(100% / var(--tablet-breakpoint)) - var(--carousel-gap)) - 16px) );\n    }\n    .fs-recommended-products-container {\n        grid-area: span 2 / span 2;\n    }\n    .fs-arrows-container {\n      opacity: calc(var(--num-of-products) - var(--tablet-breakpoint));\n    }\n}\n";