/* ===========================================
 Variables defined based on SHAPE and SIZES
 =========================================== */
.cnc-icon[kind][shape="rounded"],
.cnc-icon[kind]:not([shape]) {
  --shape-border-radius: var(--shape-border-radius-rounded);
  --indicator-border-radius: var(--indicator-border-radius-rounded);
}

.cnc-icon[kind][shape="pill"] {
  --shape-border-radius: var(--shape-border-radius-pill, var(--radius-full, 9999px));
  --indicator-border-radius: var(--shape-border-radius);
}

.cnc-icon[kind][shape="circle"] {
  --shape-border-radius: 50%;
  --indicator-border-radius: 50%;
}

.cnc-icon[kind][shape="square"],
.cnc-icon[kind][shape="rectangle"] {
  --shape-border-radius: 0;
  --indicator-border-radius: 0;
}

/* ===========================================
  Variables defined based on SIZES
  =========================================== */
.cnc-icon[size="xxs"]:not([kind]) {
  /* --container-size: 0.75rem; */
  --container-size: 0.625rem;
  --container-padding-inline: 0;
}
.cnc-icon[size="xs"]:not([kind]) {
  /* --container-size: 0.75rem; */
  --container-size: 0.75rem;
  --container-padding-inline: 0;
}
.cnc-icon[size="sm"]:not([kind]) {
  /* --container-size: 0.875rem; */
  --container-size: 0.875rem;
  --container-padding-inline: 0;
}
.cnc-icon[size="md"]:not([kind]),
.cnc-icon:not([size]):not([kind]) {
  --container-size: 1rem;
  --container-padding-inline: 0;
}
.cnc-icon[size="lg"]:not([kind]) {
  /* --container-size: 1.5rem; */
  --container-size: 1.25rem;
  --container-padding-inline: 0;
}
.cnc-icon[size="xl"]:not([kind]) {
  /* --container-size: 2rem; */
  --container-size: 1.5rem;
  --container-padding-inline: 0;
}
.cnc-icon[size="2xl"]:not([kind]) {
  /* --container-size: 3rem; */
  --container-size: 2rem;
  --container-padding-inline: 0;
}
.cnc-icon[size="3xl"]:not([kind]) {
  /* --container-size: 4rem; */
  --container-size: 2.5rem;
  --container-padding-inline: 0;
}
/*
.cnc-icon[size="full"]:not([kind]) {
  width: 100%;
  height: 100%;
}
*/

/* Sizes */
.cnc-icon[kind][size="xxs"] {
  --container-size: 1.25rem;
  --container-padding-inline: 0.35rem;
  --shape-border-radius-rounded: 0.25rem;
  --indicator-inset: 0.1875rem;
  --indicator-border-radius-rounded: 0.1875rem;
}

.cnc-icon[kind][size="xs"] {
  --container-size: 1.5rem;
  --container-padding-inline: 0.4rem;
  --shape-border-radius-rounded: 0.375rem;
  --indicator-inset: 0.25rem;
  --indicator-border-radius-rounded: 0.25rem;
}

.cnc-icon[kind][size="sm"] {
  --container-size: 2rem;
  --container-padding-inline: 0.5rem;
  --shape-border-radius-rounded: 0.5rem;
  --indicator-inset: 0.3125rem;
  --indicator-border-radius-rounded: 0.3125rem;
}

.cnc-icon[kind][size="md"],
.cnc-icon:not([size]) {
  --container-size: 2.5rem;
  --container-padding-inline: 0.6rem;
  --shape-border-radius-rounded: 0.625rem;
  --indicator-inset: 0.375rem;
  --indicator-border-radius-rounded: 0.375rem;
}

.cnc-icon[kind][size="lg"] {
  --container-size: 3rem;
  --container-padding-inline: 0.8rem;
  --shape-border-radius-rounded: 0.75rem;
  --indicator-inset: 0.5rem;
  --indicator-border-radius-rounded: 0.4375rem;
}

.cnc-icon[kind][size="xl"] {
  --container-size: 3.5rem;
  --container-padding-inline: 0.9rem;
  --shape-border-radius-rounded: 0.8125rem;
  --indicator-inset: 0.5625rem;
  --indicator-border-radius-rounded: 0.5rem;
}

.cnc-icon[kind][size="2xl"] {
  --container-size: 4rem;
  --container-padding-inline: 1rem;
  --shape-border-radius-rounded: 0.8125rem;
  --indicator-inset: 0.625rem;
  --indicator-border-radius-rounded: 0.5625rem;
}
.cnc-icon[kind][size="3xl"] {
  --container-size: 4.5rem;
  --container-padding-inline: 1.1rem;
  --shape-border-radius-rounded: 0.85rem;
  --indicator-inset: 0.7rem;
  --indicator-border-radius-rounded: 0.625rem;
}

/* ===========================================
  Variables defined based on KIND
  =========================================== */

/* --- Default (shared) variables */
.cnc-icon {
  line-height: 0;
  --container-size: 2.5rem;
  --container-padding-inline: 0.625rem;
  --container-transition-duration: 0.35s;
  --container-transition-timing: linear;
  /* The picture's own measure. Not `--icon-size`: every widget that draws
     an icon sizes it with its own `--icon-size`, and a value set here, on
     the icon's element, stood in front of theirs, so every such icon was
     `auto` wide (`widgets/icon/cnc-icon-sized.test.ts`). */
  --picture-size: auto;
  --shape-border-radius-rounded: 0.625rem;
  --shape-border-radius-pill: 0.75rem;
  --shape-border-radius: var(--shape-border-radius-rounded);
  --container-border-radius: var(--shape-border-radius, 0);
  --indicator-inset: 0.375rem;
  /* --container-animation-duration: 2s;
  --container-animation-timing: cubic-bezier(0.4, 0, 0.6, 1); */
}
/* --- Default kind (or not specified) */
.cnc-icon:not([kind]) {
  --container-bg: transparent;
  --container-border-color: transparent;
  --container-border-width: 0;
  --container-outline-color: transparent;
  --container-shadow: none;
  --shape-border-radius-rounded: 0;
  /* --icon-color: var(--color-700, inherit); */
  --icon-color: inherit;
}

.dark .cnc-icon:not([kind]) {
  --icon-color: var(--color-50, var(--color-neutral-50));
}

/* --- Default kind (or not specified) */
.cnc-icon[kind="soft"] {
  --container-bg: color-mix(in srgb, var(--color-500, var(--color-neutral-500)) 10%, transparent);
  --container-border-color: transparent;
  --container-border-width: 0;
  --container-outline-color: var(--color-800, var(--color-neutral-800));
  --container-shadow: none;
  /* 0 0 0 1px #0000002e inset,
    0 -2px 0 #0000000d inset; */
  --icon-color: var(--color-700, var(--color-neutral-700));
  --indicator-bg: var(--icon-color);
}

.dark .cnc-icon[kind="soft"] {
  --container-bg: color-mix(in srgb, var(--color-500, var(--color-neutral-500)) 20%, transparent);
  --container-border-color: var(--color-600, var(--color-neutral-600));
  --container-outline-color: var(--color-700, var(--color-neutral-700));
  --icon-color: var(--color-50, var(--color-neutral-50));
}

/* --- SOLID kind */

.cnc-icon[kind="solid"] {
  --container-bg: transparent;
  /* --container-border-color: transparent; */
  --container-border-width: 0;
  --container-border-color: var(--color-300, var(--color-neutral-300));
  --container-shadow: inset 0 1px 0
    color-mix(in srgb, var(--container-border-color) 30%, transparent);
  --indicator-bg: var(--color-500, var(--color-neutral-500));
  --icon-color: white;
}

.dark .cnc-icon[kind="solid"] {
  --container-bg: transparent;
  /* --container-bg: color-mix(
    in srgb,
    var(--color-500, var(--color-neutral-500)) 90%,
    transparent
  ); */
  --container-border-color: var(--color-900, var(--color-neutral-800));
  /* --container-border-color: transparent; */
  --container-border-width: 0;
  --indicator-bg: var(--color-700, var(--color-neutral-700));
  --icon-color: var(--color-50, var(--color-neutral-50));
}

.cnc-icon[kind="solid"] .cnc-icon_container::before {
  @apply absolute;
  content: "";
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  border-color: transparent;
  background: color-mix(in srgb, var(--color-500, var(--color-neutral-500)) 10%, transparent);
  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}

.cnc-icon[kind="solid"] .cnc-icon_container::after {
  @apply absolute;
  content: "";
  z-index: -1;
  background: var(--indicator-bg);
  inset: var(--indicator-inset);
  border-radius: var(--indicator-border-radius);
  border-color: var(--color-500, var(--color-neutral-500));
  border-width: 1px;
}

/* --- FILLED kind */

.cnc-icon[kind="filled"] {
  --container-bg: var(--color-600, white);
  --container-border-color: var(--color-700, var(--color-gray-300));
  --container-border-width: 0;
  --container-shadow: 0 -2px 0 #00000015 inset, inset 0 0 0 1px var(--container-border-color);
  --icon-color: var(--color-50, var(--color-neutral-800));
}

.dark .cnc-icon[kind="filled"] {
  --container-bg: var(--color-700, var(--color-neutral-700));
  --container-border-color: var(--color-800, var(--color-neutral-800));
  --icon-color: var(--color-50, var(--color-neutral-50));
}

/* --- OUTLINE kind */

.cnc-icon[kind="outline"] {
  --container-bg: white;
  --container-border-color: var(--color-gray-300);
  --container-border-width: 0;
  --container-shadow: 0 0 0 1px #0000002e inset, 0 -2px 0 #0000000d inset;
  --icon-color: var(--color-600, var(--color-neutral-600));
}

.dark .cnc-icon[kind="outline"] {
  --container-bg: color-mix(in srgb, var(--color-800, var(--color-neutral-800)) 5%, transparent);
  --container-border-color: var(--color-900, var(--color-neutral-800));
  --container-border-width: 0;
  --container-shadow: 0 0 0 1px var(--container-border-color) inset, 0 -2px 0 #0000000d inset;
  --icon-color: var(--color-50, var(--color-neutral-50));
}

/* --- Eleveted kind */

.cnc-icon[kind="elevated"] {
  --container-bg: white;
  --container-border-color: var(--color-gray-300);
  --container-border-width: 0;
  --container-shadow: 0 0 0 1px #0000002e inset, 0 -2px 0 #0000000d inset;
  /* --indicator-bg: var(--color-700, var(--color-neutral-700)); */
  --icon-color: var(--color-600, var(--color-neutral-600));
}

.dark .cnc-icon[kind="elevated"] {
  --container-bg: color-mix(in srgb, var(--color-800, var(--color-neutral-700)) 8%, transparent);
  --container-border-color: var(--color-900, var(--color-neutral-700));
  --container-border-width: 0;
  --container-shadow:
    0 0 0 1px var(--container-border-color) inset, 0 -2px 0 #0000000d inset,
    0px 1px 2px 0px var(--tw-shadow-color, #0000001a);
  /* --indicator-bg: color-mix(
    in srgb,
    var(--color-800, var(--color-neutral-700)) 40%,
    transparent
  ); */
  --icon-color: var(--color-50, var(--color-neutral-50));
}

.cnc-icon[kind="elevated"] .cnc-icon_container::after {
  @apply absolute;
  content: "";
  background: var(--indicator-bg);
  inset: calc(var(--indicator-inset));
  border-radius: var(--indicator-border-radius);
  border-color: color-mix(in srgb, var(--container-border-color) 20%, transparent);
  box-shadow:
    0px 0px 0px 1px color-mix(in srgb, var(--container-border-color) 80%, transparent) inset,
    0px -2px 3px 0px color-mix(in srgb, var(--container-border-color) 50%, #00000021) inset,
    1px 2px 3px 0px color-mix(in srgb, var(--container-border-color) 40%, #00000021);
  border-width: 0px;
  border-style: solid;
}

/* --- Ring kind */

.cnc-icon[kind="ring"] {
  --container-bg: transparent;
  --container-border-color: var(--color-gray-300);
  --container-border-width: 0;
  --container-shadow: 0px 0px 0px calc(var(--container-size) / 30)
    color-mix(in srgb, var(--icon-color) 10%, transparent) inset;
  /* --indicator-bg: var(--color-700, var(--color-neutral-700)); */
  --icon-color: var(--color-600, var(--color-neutral-600));
}

.dark .cnc-icon[kind="ring"] {
  --container-bg: transparent;
  --container-border-color: var(--color-900, var(--color-neutral-700));
  --container-border-width: 0;
  /* --indicator-bg: color-mix(
    in srgb,
    var(--color-800, var(--color-neutral-700)) 40%,
    transparent
  ); */
  --icon-color: var(--color-600, var(--color-neutral-500));
}

.cnc-icon[kind="ring"] .cnc-icon_container::after {
  @apply absolute;
  content: "";
  background: var(--indicator-bg);
  inset: calc(var(--indicator-inset) / 1.1);
  border-radius: var(--indicator-border-radius);
  border-color: transparent;
  box-shadow: 0px 0px 0px calc(var(--container-size) / 30)
    color-mix(in srgb, var(--icon-color) 25%, transparent) inset;
  border-width: 0;
  border-style: solid;
}

/* --- Stack kind */

.cnc-icon[kind="stack"] {
  --container-bg: transparent;
  --container-border-color: var(--color-gray-300);
  --container-border-radius: 0;
  --icon-color: var(--color-600, var(--color-neutral-600));
}

.dark .cnc-icon[kind="stack"] {
  --container-bg: transparent;
  --container-border-color: transparent;
  --container-border-width: 0;
  --container-shadow: none;
  --icon-color: var(--color-400, var(--color-neutral-500));
}

.cnc-icon[kind="stack"] .cnc-icon_container::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: currentColor;
  position: absolute;
  overflow: visible;
  color: var(--icon-color);
  --stack-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20aria-hidden='true'%20viewBox='0%200%2090%2098'%20fill='none'%20style='overflow:visible'%3E%3Cdefs%3E%3Cfilter%20id='blur'%20x='-30%25'%20y='-100%25'%20width='160%25'%20height='300%25'%3E%3CfeGaussianBlur%20stdDeviation='4'/%3E%3C/filter%3E%3C/defs%3E%3Cellipse%20cx='36'%20cy='76'%20rx='30'%20ry='7'%20fill='%23000'%20fill-opacity='.085'%20filter='url(%23blur)'/%3E%3Cg%20opacity='.4'%3E%3Cpath%20d='M42.2538%202.046C41.4408%201.6325%2040.3965%201.6677%2039.2612%202.2424L7.9616%2018.1934C5.3895%2019.5039%203.301%2023.1064%203.301%2026.2322V64.3226C3.301%2066.0677%203.9458%2067.2943%204.962%2067.8199L1.8363%2066.229C0.8201%2065.7104%200.1753%2064.4771%200.1753%2062.732V24.6412C0.1753%2021.5085%202.2638%2017.913%204.8359%2016.6024L36.1355%200.6515C37.2778%200.0698%2038.322%200.0416%2039.128%200.4551L42.2538%202.046Z'%20stroke='%23000'%20stroke-opacity='.2'%20stroke-width='.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Cpath%20d='M42.2545%202.0456C43.2707%202.5643%2043.9155%203.7979%2043.9155%205.543V43.6337C43.9155%2046.7665%2041.827%2050.3616%2039.2549%2051.6722L7.9554%2067.6235C6.813%2068.2052%205.7687%2068.2331%204.9628%2067.8196C3.9465%2067.301%203.3018%2066.0673%203.3018%2064.3222V26.2318C3.3018%2023.0991%205.3903%2019.5036%207.9624%2018.193L39.2619%202.2421C40.4043%201.6604%2041.4486%201.6321%2042.2545%202.0456Z'%20stroke='%23000'%20stroke-opacity='.2'%20stroke-width='.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/g%3E%3Cg%20opacity='.6'%20transform='translate(13.65%206.04)'%3E%3Cpath%20d='M42.2538%202.046C41.4408%201.6325%2040.3965%201.6677%2039.2612%202.2424L7.9616%2018.1934C5.3895%2019.5039%203.301%2023.1064%203.301%2026.2322V64.3226C3.301%2066.0677%203.9458%2067.2943%204.962%2067.8199L1.8363%2066.229C0.8201%2065.7104%200.1753%2064.4771%200.1753%2062.732V24.6412C0.1753%2021.5085%202.2638%2017.913%204.8359%2016.6024L36.1355%200.6515C37.2778%200.0698%2038.322%200.0416%2039.128%200.4551L42.2538%202.046Z'%20stroke='%23000'%20stroke-opacity='.2'%20stroke-width='.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Cpath%20d='M42.2545%202.0456C43.2707%202.5643%2043.9155%203.7979%2043.9155%205.543V43.6337C43.9155%2046.7665%2041.827%2050.3616%2039.2549%2051.6722L7.9554%2067.6235C6.813%2068.2052%205.7687%2068.2331%204.9628%2067.8196C3.9465%2067.301%203.3018%2066.0673%203.3018%2064.3222V26.2318C3.3018%2023.0991%205.3903%2019.5036%207.9624%2018.193L39.2619%202.2421C40.4043%201.6604%2041.4486%201.6321%2042.2545%202.0456Z'%20stroke='%23000'%20stroke-opacity='.2'%20stroke-width='.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/g%3E%3Cg%20opacity='.8'%20transform='translate(27.32%2012.08)'%3E%3Cpath%20d='M42.2538%202.046C41.4408%201.6325%2040.3965%201.6677%2039.2612%202.2424L7.9616%2018.1934C5.3895%2019.5039%203.301%2023.1064%203.301%2026.2322V64.3226C3.301%2066.0677%203.9458%2067.2943%204.962%2067.8199L1.8363%2066.229C0.8201%2065.7104%200.1753%2064.4771%200.1753%2062.732V24.6412C0.1753%2021.5085%202.2638%2017.913%204.8359%2016.6024L36.1355%200.6515C37.2778%200.0698%2038.322%200.0416%2039.128%200.4551L42.2538%202.046Z'%20stroke='%23000'%20stroke-opacity='.3'%20stroke-width='.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Cpath%20d='M42.2545%202.0456C43.2707%202.5643%2043.9155%203.7979%2043.9155%205.543V43.6337C43.9155%2046.7665%2041.827%2050.3616%2039.2549%2051.6722L7.9554%2067.6235C6.813%2068.2052%205.7687%2068.2331%204.9628%2067.8196C3.9465%2067.301%203.3018%2066.0673%203.3018%2064.3222V26.2318C3.3018%2023.0991%205.3903%2019.5036%207.9624%2018.193L39.2619%202.2421C40.4043%201.6604%2041.4486%201.6321%2042.2545%202.0456Z'%20stroke='%23000'%20stroke-opacity='.3'%20stroke-width='.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask: var(--stack-mask) center / contain no-repeat;
  mask: var(--stack-mask) center / contain no-repeat;
}

.cnc-icon[kind="stack"] .cnc-icon_container svg {
  position: relative;
  --tw-skew-y: skewY(calc(26deg * -1));
  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
  left: 63%;
  top: 23%;
  z-index: 1;
  transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0))
    rotate(var(--tw-rotate, 0)) skewX(0deg) skewY(-27deg) scaleX(var(--tw-scale-x, 0.6))
    scaleY(var(--tw-scale-y, 0.7));
}

/* ===========================================
  Elements classess for identified parts
  =========================================== */

/* Public parts */
.cnc-icon_container {
  inline-size: var(--container-size);
  block-size: var(--container-size);
  padding-inline: var(--container-padding-inline);
  padding-block: 0;
  border-radius: var(--container-border-radius);
  background: var(--container-bg, transparent);
  border-style: solid;
  border-width: 0;
  outline-color: var(--container-outline-color);
  outline-width: 1px;
  line-height: 0;
  appearance: none;
  -webkit-appearance: none;
  color-scheme: light;
  cursor: inherit;
  font: inherit;
  box-shadow: var(--container-shadow);
  pointer-events: none;
}

/* A plain icon is the size of its element (`widgets/icon/cnc-icon-sized.test.ts`). The element takes
   its size's measure, which classes on it replace, since this sheet is in
   the `widgets` layer beneath them, and the picture fills the element. The
   picture held its own measure instead, and an icon the page made 24px drew
   16px in the corner of its box. */
.cnc-icon:not([kind]) {
  inline-size: var(--container-size);
  block-size: var(--container-size);
}

.cnc-icon:not([kind]) .cnc-icon_container {
  inline-size: 100%;
  block-size: 100%;
}

.cnc-icon[animation] .cnc-icon_container {
  transition:
    background var(--container-transition-duration) var(--container-transition-timing),
    border-color var(--container-transition-duration) var(--container-transition-timing),
    color var(--container-transition-duration) var(--container-transition-timing);
}

.cnc-icon_container svg {
  @apply shrink-0 display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  fill: currentColor;
  overflow: visible;
  inline-size: var(--picture-size);
  block-size: var(--picture-size);
  color: var(--icon-color);
}

/* A bare name is the design system's glyph: a span masking `currentColor`
   through its `--icon-<name>-svg`, coloured like the svg above. */
.cnc-icon_container .cnc-glyph {
  color: var(--icon-color);
}

/* Outline sets such as Lucide fill nothing; `class="filled"` fills every shape. */
.cnc-icon.filled .cnc-icon_container svg * {
  fill: var(--icon-fill, currentColor);
}

/* Animation */

@media (prefers-reduced-motion: reduce) {
  .cnc-icon[animation] :is(svg, .cnc-glyph) {
    --container-animation-duration: 1ms !important;
    --container-animation-iteration: 1 !important;
    --container-animation-timing: 1ms !important;
  }
  .cnc-icon[animation] :is(path, line, polyline, polygon, circle, rect) {
    animation: none;
    stroke-dashoffset: 0;
  }
}

.cnc-icon.pulse :is(svg, .cnc-glyph),
.cnc-icon.hover\:pulse:hover :is(svg, .cnc-glyph),
.group:hover .cnc-icon.group-hover\:pulse :is(svg, .cnc-glyph),
.cnc-icon[animation="pulse"] .cnc-icon_container {
  animation: animate-pulse var(--container-animation-duration, 2s)
    var(--container-animation-timing, cubic-bezier(0.4, 0, 0.6, 1))
    var(--container-animation-iteration, infinite);
}

.cnc-icon.spin :is(svg, .cnc-glyph),
.cnc-icon.hover\:spin:hover :is(svg, .cnc-glyph),
.group:hover .cnc-icon.group-hover\:spin :is(svg, .cnc-glyph),
.cnc-icon[animation="spin"] :is(svg, .cnc-glyph) {
  animation: animate-spin var(--container-animation-duration, 2s)
    var(--container-animation-timing, linear) var(--container-animation-iteration, infinite);
}

.cnc-icon.bounce :is(svg, .cnc-glyph),
.cnc-icon.hover\:bounce:hover :is(svg, .cnc-glyph),
.group:hover .cnc-icon.group-hover\:bounce :is(svg, .cnc-glyph),
.cnc-icon[animation="bounce"] :is(svg, .cnc-glyph) {
  animation: animate-bounce var(--container-animation-duration, 2s)
    var(--container-animation-timing, cubic-bezier(0.4, 0, 0.6, 1))
    var(--container-animation-iteration, infinite);
}

.cnc-icon.shake :is(svg, .cnc-glyph),
.cnc-icon.hover\:shake:hover :is(svg, .cnc-glyph),
.group:hover .cnc-icon.group-hover\:shake :is(svg, .cnc-glyph),
.cnc-icon[animation="shake"] :is(svg, .cnc-glyph) {
  animation: animate-shake var(--container-animation-duration, 600ms)
    var(--container-animation-timing, ease-in-out) var(--container-animation-iteration, infinite);
}

.cnc-icon.pop :is(svg, .cnc-glyph),
.cnc-icon.hover\:pop:hover :is(svg, .cnc-glyph),
.group:hover .cnc-icon.group-hover\:pop :is(svg, .cnc-glyph),
.cnc-icon[animation="pop"] :is(svg, .cnc-glyph) {
  animation: animate-pop var(--container-animation-duration, 600ms)
    var(--container-animation-timing, ease-in-out) var(--container-animation-iteration, infinite);
}

.cnc-icon.draw svg,
.cnc-icon.hover\:draw:hover svg,
.group:hover .cnc-icon.group-hover\:draw svg,
.cnc-icon[animation="draw"] :is(path, line, polyline, polygon, circle, rect) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: animate-draw var(--container-animation-duration, 2s)
    var(--container-animation-timing, ease-out) 5s var(--container-animation-iteration, forwards);
}

/* .cnc-icon[animation="draw"] path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  fill-opacity: 0;
  animation:
    animate-draw 4s ease-out forwards,
    animate-fill 300ms ease-out 700ms forwards;
} */
.cnc-icon[animation="draw"] path:nth-of-type(1) {
  animation-delay: 0ms;
}
.cnc-icon[animation="draw"] path:nth-of-type(2) {
  animation-delay: 200ms;
}
.cnc-icon[animation="draw"] path:nth-of-type(3) {
  animation-delay: 400ms;
}

.cnc-icon[animation="draw-loop"] path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: animate-draw-loop 2s ease-in-out infinite;
}