/////////////////////////////
// THEME / COMPONENTS / CARDS
/////////////////////////////


@use "../variables/" as var;
@use "../mixins/" as mixins;


.unl-icon-card {
  grid-template-columns: 1fr;
  grid-template-rows: calc(var(--icon-size) / 2) calc(var(--icon-size) / 2) 1fr;
}


.unl-icon-card:has(.unl-icon-card-icon.dcf-h-6.dcf-w-6) { --icon-size: #{var.$length-em-6}; }
.unl-icon-card:has(.unl-icon-card-icon.dcf-h-9.dcf-w-9) { --icon-size: #{var.$length-em-9}; }


[class^=".unl-icon-card-icon-"],
[class*=".unl-icon-card-icon-"] {
  grid-area: 1 / 1 / 3 / -1;
}


.unl-icon-card-body {
  --clip-padding: #{var.$length-em-4};
  --clip-block: calc(var(--icon-size) / 2);
  --clip-inline: calc(calc(var(--icon-size) / 2) + var(--clip-padding));
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0, calc(50% + var(--clip-inline)) 0, calc(50% + var(--clip-inline)) var(--clip-block), calc(50% - var(--clip-inline)) var(--clip-block), calc(50% - var(--clip-inline)) 0, 0 0);
  grid-area: 2 / 1 / -1 / -1;
}


.unl-icon-card:has(.unl-icon-card-icon.dcf-h-9.dcf-w-9) .unl-icon-card-body {
  padding-top: var.$length-em-8;
}