@lanaco/lnc-react-ui/dist/style-BzaX45du.js

React component library

import { s as e } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as r } from "./breakpoints-BubDitvo.js";
const i = e.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  align-self: stretch;

  & .wrapper__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }

  @media ${r("M")} {
    & .wrapper__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  & .wrapper__action {
    border: 1px solid var(--neutral-95012, rgba(20, 22, 26, 0.12));
    color: var(--gray-950, #14161a);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25rem;
    letter-spacing: -0.09px;
  }

  &.highlight {
    border-radius: 1rem;
    border: 2px solid var(--warning-500, #f59e0b);
    background: var(--warning-50, #fffbeb);
    padding: 0.75rem;
    width: fit-content;

    & .wrapper__action {
      border: none;
    }
  }

  @media ${r("S")} {
    & .wrapper__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    & .wrapper__action {
      border: none;
    }

    & .simple-product-card {
      max-width: unset;
      min-width: unset;
      width: unset;
    }
  }

  @media ${r("XS")} {
    & .wrapper__grid {
      grid-template-columns: 1fr;
    }
  }
`;
export {
  i as W
};