import styled from "@emotion/styled";
import { pxToRem } from "../../utils/pxToRem";

export const ProductCardStyle = styled.div<{ disabled?: boolean, $bColor?: string, hasBorder?: boolean }>` 
  max-width: 380px;
  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
  opacity: ${(props) => (props.disabled ? 0.5 : 1)};
  border-left: 7px solid ${(props) => props.hasBorder ? props.$bColor : 'transparent'} !important;
  border-radius: 5px;

  p.title {
    font-weight: 600;
  }

  p.description {
    margin-bottom: ${pxToRem(17)};
    line-height: ${pxToRem(24)};
  }

  .MuiPaper-root {
    min-height: 180px;
  }

  @media (max-width: 1535px) {
    max-width: 100%;
  }
`;

export const IconCardStyle = styled.div<{ $bColor?: string; $iColor: string }>`
  display: inline-flex;
  border-radius: 5px;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background-color: ${(props) => props.$bColor};
  min-width: ${pxToRem(50)};
  min-height: ${pxToRem(50)};
  margin-right: ${pxToRem(10)};
  box-sizing: border-box;

  svg {
  max-height: 100%;
  max-width: 100%;
    path {
      fill: ${(props) => props.$iColor};
    }
  }
`;

export const TitleContainer = styled.div`
  display: flex;
  align-items: center;
  margin-bottom: ${pxToRem(16)};

  p {
    font-size: ${pxToRem(24)};
  }
`;