/* ===========================================
  Variables defined based on SHAPE and SIZES
  =========================================== */

.cnc-button:where([shape="square"], [shape="rectangle"]) {
  --shape-border-radius: 0;
}

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

.cnc-button:where([shape="circle"]) {
  --shape-border-radius: 50%;
}

.cnc-button:where([size="xxs"]) {
}

/* A button that names no shape is `rounded`, its default (`widgets/button/cnc-button-corners.test.ts`). */
.cnc-button:where([shape="rounded"], :not([shape])) {
  --shape-border-radius: var(--shape-border-radius-rounded, var(--radius-lg, 0.5rem));
}

/* ===========================================
  Variables defined based on SIZES
  =========================================== */

.cnc-button[size="xxs"] {
  --shape-border-radius-rounded: var(--radius-sm, 0.25rem);
  --container-font-size: 0.75rem;
  --container-line-height: 1rem;
  --container-font-weight: 600;
  --container-padding: 0.125rem 0.5rem;
  --container-padding-x-icon-only: 0.125rem;
  --icon-size: 0.875rem;
}

.cnc-button[size="xs"] {
  --shape-border-radius-rounded: var(--radius-md, 0.5rem);
  --container-font-size: 0.75rem;
  --container-line-height: 1rem;
  --container-font-weight: 600;
  --container-padding: 0.25rem 0.625rem;
  --container-padding-x-icon-only: 0.25rem;
  --icon-size: 0.875rem;
}

.cnc-button[size="sm"] {
  --shape-border-radius-rounded: var(--radius-md, 0.5rem);
  --container-font-size: 0.875rem;
  --container-line-height: 1.25rem;
  --container-font-weight: 600;
  --container-padding: 0.375rem 0.875rem;
  --container-padding-x-icon-only: 0.375rem;
  --icon-size: 1rem;
}

.cnc-button[size="md"],
.cnc-button:not([size]) {
  --shape-border-radius-rounded: var(--radius-lg, 0.55rem);
  --container-font-size: 1rem;
  --container-line-height: 1.5rem;
  --container-padding: calc(var(--box-spacing) * 2) calc(var(--box-spacing) * 4);
  --container-padding-x-icon-only: 0.5rem;
  --icon-size: 1rem;
}

.cnc-button[size="lg"] {
  --shape-border-radius-rounded: var(--radius-lg, 0.55rem);
  --container-font-size: 1.125rem;
  --container-line-height: 1.75rem;
  --container-padding: 0.625rem 1.125rem;
  --container-padding-x-icon-only: 0.625rem;
  --container-gap: 0.5rem;
  --icon-size: 1.25rem;
}

.cnc-button[size="xl"] {
  --shape-border-radius-rounded: var(--radius-xl, 0.65rem);
  --container-font-size: 1.25rem;
  --container-line-height: 1.75rem;
  --container-padding: 0.875rem 1.25rem;
  --container-padding-x-icon-only: 0.875rem;
  --container-gap: 0.5rem;
  --icon-size: 1.25rem;
}

.cnc-button[size="2xl"] {
  --shape-border-radius-rounded: var(--radius-xl, 0.65rem);
  --container-font-size: 1.5rem;
  --container-line-height: 2rem;
  --container-padding: 1rem 1.5rem;
  --container-padding-x-icon-only: 1rem;
  --icon-size: 1.5rem;
}

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

/* --- Default (shared) variables */
.cnc-button {
  line-height: 0;
  --container-font-weight: 500;
  --container-transition-duration: 150ms;
  --container-transition-timing: linear;
  --container-border-radius: var(--shape-border-radius, var(--radius-md, 0.375rem));
  --icon-color: var(--color-500, var(--color-neutral-500));

  /* Everything the sheet reads, reset on the host so a parent's same-named
     variable never leaks in. Kinds and sizes set their own; `initial` leaves
     a `var()` fallback in charge. */
  --container-width: initial;
  --container-height: initial;
  --container-gap: initial;
  --container-padding: initial;
  --container-padding-x-icon-only: initial;
  --container-font-size: initial;
  --container-line-height: initial;
  --container-bg: initial;
  --container-bg-hover: initial;
  --container-bg-pressed: initial;
  --container-text-color: initial;
  --container-text-color-hover: initial;
  --container-text-color-pressed: initial;
  --container-border-color: initial;
  --container-outline-color: initial;
  --container-outline-offset: initial;
  --container-outline-width: initial;
  --container-shadow: initial;
  --container-shadow-hover: initial;
  --container-shadow-color: initial;
  --container-highlight-color: initial;
  --container-opacity-disabled: initial;
  --container-animation-duration: initial;
  --container-animation-timing: initial;
  --icon-size: initial;
  --icon-color-hover: initial;
  --icon-color-pressed: initial;
  --caret-size: initial;
  --label-padding-x: initial;
}

/* A button group spells `default` out for every segment (`widgets/button-group/cnc-button-group-ground.test.ts`). */
/* --- Default kind: `kind="default"` spelled out, or no kind at all. The
   widget declares `default` as a value the prop takes, so a use-site
   writing it must get the same button as one writing nothing
   (`widgets/button/cnc-button-kinds.test.ts`). */
.cnc-button:not([kind]),
.cnc-button[kind="default"] {
  --container-bg: var(--color-600, white);
  --container-bg-hover: var(--color-700, var(--color-neutral-50));
  --container-bg-pressed: var(--color-800, var(--color-neutral-100));
  --container-text-color: var(--color-50, var(--color-neutral-800));
  --container-text-color-hover: var(--color-50, var(--color-neutral-800));
  --container-text-color-pressed: var(--color-50, var(--color-neutral-900));
  --container-border-color: var(--color-700, var(--color-gray-300));
  --container-outline-color: var(--color-800, var(--color-neutral-800));
  --container-shadow:
    0 -2px 0 0 var(--container-shadow-color, #00000015) inset,
    inset 0 0 0 1px var(--container-border-color), 1px 2px 2px rgba(0, 0, 0, 0.15);
  --container-shadow-hover:
    0 -2px 0 0 var(--container-shadow-color, #00000015) inset,
    inset 0 0 0 1px var(--container-border-color), 0 0px 3px rgba(0, 0, 0, 0.28);
  --icon-color: var(--color-200, var(--color-neutral-400));
}
cnc-button-group .cnc-button:not([kind]),
cnc-button-group .cnc-button[kind="default"] {
  --container-shadow:
    0 -2px 0 0 var(--container-shadow-color, #00000015) inset,
    inset 0 0 0 1px var(--container-border-color), 1px 1px 4px rgba(0, 0, 0, 0.1);
  --container-shadow-hover:
    0 -2px 0 0 var(--container-shadow-color, #00000015) inset,
    inset 0 0 0 1px var(--container-border-color);
}

.dark .cnc-button:not([kind]),
.dark .cnc-button[kind="default"] {
  --container-bg: var(--color-950, black);
  --container-bg-hover: var(--color-850, var(--color-neutral-900));
  --container-bg-pressed: var(--color-800, var(--color-neutral-800));
  --container-text-color: var(--color-500, var(--color-neutral-500));
  --container-text-color-hover: var(--color-600, var(--color-neutral-500));
  --container-text-color-pressed: var(--color-100, var(--color-neutral-50));
  --container-border-color: var(--color-600, var(--color-neutral-600));
  --container-outline-color: var(--color-700, var(--color-neutral-700));
  --icon-color: var(--color-600, var(--color-neutral-600));
}

/* --- UTILITY2 kind */

.cnc-button[kind="utility2"] {
  --container-bg: var(--color-100, var(--color-gray-100));
  --container-bg-hover: rgb(from black r g b / 2%);
  --container-bg-pressed: white;
  --container-text-color: var(--color-gray-400);
  --container-text-color-hover: var(--color-600, var(--color-gray-600));
  --container-text-color-pressed: var(--color-600, var(--color-gray-700));
  --container-border-color: var(--color-100, var(--color-gray-100));
  --container-outline-color: var(--color-800, var(--color-gray-800));
  --icon-color: var(--color-500, var(--color-gray-500));
  --container-shadow: inset 0 0 0 1px var(--container-border-color);
}

/* --- UTILITY kind  */
.cnc-button[kind="utility"] {
  --container-bg: transparent;
  --container-bg-hover: rgb(from black r g b / 2%);
  --container-bg-pressed: var(--color-50, rgb(from black r g b / 3%));
  --container-text-color: var(--color-gray-400);
  --container-text-color-hover: var(--color-600, var(--color-gray-600));
  --container-text-color-pressed: var(--color-600, var(--color-gray-700));
  --container-border-color: transparent;
  --container-outline-color: var(--color-800, var(--color-gray-800));
  --icon-color: var(--color-500, var(--color-gray-500));
  --container-shadow: inset 0 0 0 1px var(--container-border-color);
}

.dark .cnc-button[kind="utility"] {
  --container-bg-hover: var(--color-900, var(--color-neutral-900));
  --container-text-color: var(--color-600, var(--color-neutral-500));
  --icon-color: var(--color-600, var(--color-neutral-600));
}

/* --- TOOLBAR kind  */
.cnc-button[kind="toolbar"] {
  --container-bg: transparent;
  --container-bg-hover: transparent;
  --container-bg-pressed: white;
  --container-text-color: var(--color-gray-200);
  --container-text-color-hover: var(--color-600, var(--color-gray-600));
  --container-text-color-pressed: var(--color-600, var(--color-gray-700));
  --container-border-color: var(--color-gray-100);
  --container-outline-color: var(--color-800, var(--color-gray-800));
  --icon-color: var(--color-400, var(--color-gray-400));
  --icon-color-hover: var(--color-500, var(--color-gray-500));
  --icon-color-pressed: var(--color-600, var(--color-gray-600));
  --container-shadow: inset 0 -0.5px 0.5px 0.2px var(--color-200, transparent);
}

.dark .cnc-button[kind="toolbar"] {
  --container-bg-hover: var(--color-900, var(--color-neutral-900));
  --container-text-color: var(--color-600, var(--color-neutral-500));
  --icon-color: var(--color-600, var(--color-neutral-600));
}

/* --- SOFT kind  */

.cnc-button[kind="soft"] {
  --container-bg: var(--color-100, rgb(from var(--color-neutral-300) r g b / 10%));
  --container-bg-hover: rgb(from var(--color-200, var(--color-neutral-300)) r g b / 45%);
  --container-bg-pressed: rgb(from var(--color-300, var(--color-neutral-300)) r g b / 70%);
  --container-text-color: var(--color-700, var(--color-neutral-700));
  --container-border-color: var(--color-300, var(--color-gray-300));
  --container-outline-color: transparent;
  --icon-color: var(--color-500, var(--color-neutral-500));
  --container-shadow:
    0 -2px 0 0 var(--container-shadow-color, #00000015) inset,
    inset 0 0 0 1px var(--container-border-color), 1px 2px 2px rgba(0, 0, 0, 0.15);
  --container-shadow-hover:
    0 -2px 0 0 var(--container-shadow-color, #00000015) inset,
    inset 0 0 0 1px var(--container-border-color), 0 0px 3px rgba(0, 0, 0, 0.28);
}

cnc-button-group .cnc-button[kind="soft"] {
  --container-shadow:
    0 -2px 0 0 var(--container-shadow-color, #00000015) inset,
    inset 0 0 0 1px var(--container-border-color);
  --container-shadow-hover:
    0 -2px 0 0 var(--container-shadow-color, #00000015) inset,
    inset 0 0 0 1px var(--container-border-color);
}

.dark .cnc-button[kind="soft"] {
  --container-bg: rgb(from var(--color-700, var(--color-neutral-700)) r g b / 10%);
  --container-bg-hover: rgb(from var(--color-900, var(--color-neutral-700)) r g b / 30%);
  --container-bg-pressed: rgb(from var(--color-900, var(--color-neutral-700)) r g b / 50%);
  --container-border-color: var(--color-800, var(--color-gray-800));
  --container-text-color: var(--color-500, var(--color-neutral-400));
  --icon-color: var(--color-600, var(--color-neutral-600));
}

/* --- OUTLINE kind  */

/* `outline` as a bare attribute means the same thing as `kind="outline"`.
   Both spellings exist because the app writes both: `kind` is this widget's own
   vocabulary, and `outline` is what `cnc-button-group` binds onto every segment
   — so `<cnc-button-group outline>`, which is what every tab bar in the app is,
   set an attribute nothing matched and rendered a row of bare text. The
   `:not()` list keeps an explicit kind winning over the flag. */
.cnc-button[kind="outline"],
.cnc-button
  [outline]:not([outline="false"]):not([kind="soft"]):not([kind="plain"]):not([kind="link"]):not(
    [kind="utility"]
  ):not([kind="utility2"]):not([kind="toolbar"])
 {
  --container-bg: transparent;
  --container-bg-hover: rgb(from var(--color-200, var(--color-neutral-200)) r g b / 25%);
  --container-bg-pressed: rgb(from var(--color-300, var(--color-neutral-300)) r g b / 25%);
  --container-text-color: var(--color-700, var(--color-neutral-700));
  --container-border-color: var(--color-300, var(--color-gray-300));
  --container-outline-color: transparent;
  --icon-color: var(--color-500, var(--color-neutral-500));
  --container-shadow: inset 0 0 0 1px var(--container-border-color);
  --container-shadow-hover: inset 0 0 0 1px var(--container-border-color);
}

/* In a group an outlined button keeps its border: the border is this inset
   shadow, the group joins its buttons by overlapping it, and there is no
   frame of the group's to stand in for it (`widgets/button-group/cnc-button-group-outline.test.ts`). */

.dark .cnc-button[kind="outline"],
.dark .cnc-button[outline]:not([outline="false"]) {
  --container-bg: transparent;
  --container-bg-hover: rgb(from var(--color-900, var(--color-neutral-700)) r g b / 30%);
  --container-bg-pressed: rgb(from var(--color-900, var(--color-neutral-700)) r g b / 50%);
  --container-border-color: var(--color-800, var(--color-gray-800));
  --container-text-color: var(--color-500, var(--color-neutral-400));
  --icon-color: var(--color-600, var(--color-neutral-600));
}

/* --- PLAIN kind  */

.cnc-button[kind="plain"] {
  --container-bg: transparent;
  --container-bg-hover: rgb(from var(--color-500, var(--color-neutral-500)) r g b / 10%);
  --container-bg-pressed: rgb(from var(--color-500, var(--color-neutral-600)) r g b / 20%);
  --container-text-color: var(--color-800, var(--color-neutral-800));
  --container-border-color: transparent;
  --container-outline-color: transparent;
  --icon-color: var(--color-500, var(--color-neutral-500));
  --container-shadow: none;
}

.dark .cnc-button[kind="plain"] {
  --container-bg-hover: rgb(from var(--color-900, var(--color-neutral-900)) r g b / 35%);
  --container-text-color: var(--color-600, var(--color-neutral-500));
  --icon-color: var(--color-600, var(--color-neutral-600));
}

/* --- LINK kind  */

.cnc-button[kind="link"] {
  --container-bg: transparent;
  --container-bg-hover: transparent;
  --container-text-color: var(--color-800, var(--color-neutral-800));
  --container-border-color: transparent;
  --container-outline-color: transparent;
  --icon-color: var(--color-500, var(--color-neutral-500));
  --container-shadow: none;
  --container-height: min-content;
  --container-padding: 0 0 2px;
  --container-border-radius: 0;
}

.dark .cnc-button[kind="link"] {
  --container-text-color: var(--color-600, var(--color-neutral-500));
  --icon-color: var(--color-600, var(--color-neutral-600));
}

/* --- EXTRAS */
.cnc-button[wide] {
  @apply block w-full;
}

.cnc-button[wide] .cnc-button_container {
  width: 100%;
}

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

.cnc-button_container {
  appearance: none;
  -webkit-appearance: none;
  width: var(--container-width, inherit);
  height: var(--container-height, auto);
  gap: var(--container-gap, 0.25rem);
  padding: var(--container-padding, 0.5rem 1rem);
  border: 0;
  border-radius: var(--container-border-radius);
  background: var(--container-bg);
  background-image: none;
  box-shadow: var(--container-shadow);
  color: var(--container-text-color);
  color-scheme: light;
  cursor: inherit;
  font-family: inherit;
  font-size: var(--container-font-size, 1rem);
  font-weight: var(--container-font-weight);
  line-height: var(--container-line-height);
  outline-color: var(--container-outline-color);
  outline-offset: var(--container-outline-offset, 2px);
  outline-width: var(--container-outline-width, 1px);
}

.cnc-button[animation] .cnc-button_container {
  transition:
    background-color var(--container-transition-duration) var(--container-transition-timing),
    box-shadow var(--container-transition-duration) var(--container-transition-timing);
  /* color var(--container-transition-duration)
        var(--container-transition-timing);
      border-color var(--container-transition-duration)
        var(--container-transition-timing); */
}

.cnc-button_container::before {
  @apply absolute;
  inset: 1px;
  border: 1px solid
    var(--container-highlight-color, color-mix(in oklab, var(--color-white) 10%, transparent));
  border-radius: inherit;
  content: "";
  pointer-events: none;
  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.cnc-button_container:hover {
  background-color: var(--container-bg-hover, var(--container-bg));
  color: var(--container-text-color-hover, var(--container-text-color));
  box-shadow: var(--container-shadow-hover, var(--container-shadow));
}

.cnc-button[kind="link"] .cnc-button_container:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cnc-button_container:focus-visible {
  outline-style: solid;
}

/* .cnc-button_container:not(:has(.cnc-button_label))
  .cnc-button:not(:has(.cnc-button_label)) {  */
.cnc-button_container:has(> cnc-icon):not(:has(> :not(cnc-icon))) {
  padding-inline: var(--container-padding-x-icon-only);
}

.cnc-button_container:disabled,
.cnc-button_container.disabled {
  cursor: not-allowed;
  font-style: italic;
  opacity: var(--container-opacity-disabled, 0.6);
}

/* Animation */

.cnc-button.pulse .cnc-button_container,
.cnc-button.hover\:pulse:hover .cnc-button_container,
.group:hover .cnc-button.group-hover\:pulse .cnc-button_container,
.cnc-button[animation="pulse"] .cnc-button_container {
  animation: cnc-button-pulse var(--container-animation-duration, 2s)
    var(--container-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)) infinite;
}

.cnc-button_icon,
.cnc-button_caret {
  width: var(--icon-size);
  height: var(--icon-size);
  color: var(--icon-color) !important;
}
.cnc-button_caret {
  width: var(--caret-size);
  height: var(--caret-size);
}

.cnc-button_label {
  padding-inline: var(--label-padding-x);
}

.cnc-button_container:hover .cnc-button_icon,
.cnc-button_container:hover .cnc-button_caret {
  color: var(--icon-color-hover, var(--icon-color)) !important;
  --icon-color: var(--icon-color-hover, var(--icon-color));
}

/* States */
.cnc-button_container:active .cnc-button_icon,
.cnc-button_container:active .cnc-button_caret,
.cnc-button_container.pressed .cnc-button_icon,
.cnc-button_container.pressed .cnc-button_caret,
.cnc-button_container[aria-pressed="true"] .cnc-button_icon,
.cnc-button_container[aria-pressed="true"] .cnc-button_caret {
  color: var(--icon-color-pressed, var(--icon-color-hover, var(--icon-color))) !important;
  --icon-color: var(--icon-color-pressed, var(--icon-color-hover, var(--icon-color)));
}

.cnc-button_container:active,
.cnc-button_container.pressed,
.cnc-button_container[aria-pressed="true"],
.cnc-button[pressed]:not([pressed="false"]) .cnc-button_container {
  background-color: var(--container-bg-pressed, var(--container-bg-hover, var(--container-bg)));
  color: var(--container-text-color-pressed, var(--container-text-color));
}

@keyframes cnc-button-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}