---
import { Icon } from "@astrojs/starlight/components";
const { icon, title, iconColor, size = "large" } = Astro.props;
---
<article
class={`card bg-lightmode-dark dark:bg-dark group ${size === "sm" ? "p-6" : "py-12 px-10"}`}
>
{
icon && (
<Icon
name={icon}
class="icon"
size={`${size === "sm" ? "1.4rem" : "2rem"}`}
color={iconColor}
/>
)
}
<p class="title mt-11 mb-4">
<span set:html={title} />
</p>
<div class="body"><slot /></div>
{
size === "sm" ? (
""
) : (
<div class="mt-15">
<span>
<svg
class="transition-transform duration-300 group-hover:-rotate-45"
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.3209 0.715753L17.3509 7.84376C17.7823 8.28117 17.7823 8.99035 17.3509 9.42776L10.3209 16.5558C9.88952 16.9932 9.1901 16.9932 8.7587 16.5558C8.32731 16.1184 8.32731 15.4092 8.7587 14.9718L13.9029 9.75582H1.10465C0.494569 9.75582 0 9.25435 0 8.63576C0 8.01717 0.494569 7.5157 1.10465 7.5157H13.9029L8.7587 2.29975C8.32731 1.86234 8.32731 1.15316 8.7587 0.715753C9.1901 0.278343 9.88952 0.278343 10.3209 0.715753Z"
class="fill-lightmode-light dark:fill-light"
/>
</svg>
</span>
</div>
)
}
</article>
<style>
@layer starlight.components {
.card {
display: flex;
/* padding: clamp(1rem, calc(0.125rem + 3vw), 2.5rem); */
/* padding: 48px 40px; */
flex-direction: column;
/* gap: clamp(0.5rem, calc(0.125rem + 1vw), 1rem); */
border-radius: 1rem;
position: relative;
transition: all 0.5s ease;
border: 1px solid var(--sl-color-gray-6);
}
.card::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
background: var(--color-primary-gradient);
border-radius: inherit;
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask-composite: exclude;
-webkit-mask-composite: xor;
opacity: 0;
transition: opacity 0.5s ease;
}
.card:hover::before {
opacity: 1;
}
.title {
font-size: var(--sl-text-h4);
color: var(--sl-color-white);
line-height: var(--sl-line-height-headings);
gap: 1rem;
align-items: center;
}
.card .body {
margin: 0;
font-size: clamp(var(--sl-text-body));
}
}
</style>