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

export const ServiceCardStyle = styled.div<{ disabled?: boolean, $bColor?: string }>`
  max-width: 380px;
  min-width: 380px;
  width: 100%;
  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
  opacity: ${(props) => (props.disabled ? 0.5 : 1)};
  height: 100%;
  border-left: 7px solid ${(props) => props.$bColor};
  border-radius: 5px;

  p.description, p.title {
    margin: 0 auto;
  }
  @media (max-width: 1330px) {
    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 {

    path.stroke {
      stroke: ${(props) => props.$iColor};
    }

    path.fill {
      fill: ${(props) => props.$iColor};
    }
  }
`;
export const TitleContainer = styled.div`
  display: flex;
  align-items: center;

  p.title {
    font-size: ${pxToRem(18)};
    font-weight: 600;
  }
`;