/* ========================================
   DIETER BUTTON COMPONENTS
   AI-first dedicated classes
   ======================================== */

/* Icon + Text Button */
.diet-btn-ictxt {
  --btn-bg: var(--color-surface);
  --btn-color: var(--color-text);
  --btn-border-color: transparent;
  --btn-border-width: 0px;
  --btn-hover-bg: color-mix(in oklab, var(--btn-bg), var(--btn-color) 6%);
  --btn-hover-color: var(--btn-color);
  --btn-hover-border-color: var(--btn-border-color);
  --btn-clicked-bg: color-mix(in oklab, var(--btn-bg), var(--btn-color) 14%);
  --btn-clicked-color: var(--btn-color);
  --btn-clicked-border-color: var(--btn-border-color);
  --btn-icon-color: currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--control-inline-gap-md);
  min-height: var(--btn-height);
  padding-inline: var(--control-padding-inline);
  padding-block: 0;
  border-radius: var(--btn-radius);
  border: var(--btn-border-width) solid var(--btn-border-color);
  background: var(--btn-bg);
  color: var(--btn-color);
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.diet-btn-ictxt > * { pointer-events: none; }

.diet-btn-ictxt[data-size="xs"] {
  --btn-height: var(--control-size-xs, 1rem);
  --btn-radius: var(--control-radius-xs, 0.25rem);
  gap: var(--control-inline-gap-xs);
}

.diet-btn-ictxt[data-size="sm"] {
  --btn-height: var(--control-size-sm, 1.25rem);
  --btn-radius: var(--control-radius-sm, 0.3125rem);
  gap: var(--control-inline-gap-xs);
}

.diet-btn-ictxt[data-size="md"] {
  --btn-height: var(--control-size-md, 1.5rem);
  --btn-radius: var(--control-radius-sm, 0.25rem);
  gap: var(--control-inline-gap-sm);
}

.diet-btn-ictxt[data-size="lg"] {
  --btn-height: var(--control-size-lg, 1.75rem);
  --btn-radius: var(--control-radius-md, 0.375rem);
  gap: var(--control-inline-gap-sm);
}

.diet-btn-ictxt[data-size="xl"] {
  --btn-height: var(--control-size-xl, 2rem);
  --btn-radius: var(--control-radius-md, 0.375rem);
  gap: var(--control-inline-gap-md);
}

.diet-btn-ictxt__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--btn-icon-color);
  flex: none;
}

.diet-btn-ictxt__icon svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.diet-btn-ictxt[data-size="xs"] .diet-btn-ictxt__icon,
.diet-btn-ictxt[data-size="xs"] .diet-btn-ictxt__icon svg {
  inline-size: var(--icon-size-12, 0.75rem);
  block-size: var(--icon-size-12, 0.75rem);
}

.diet-btn-ictxt[data-size="sm"] .diet-btn-ictxt__icon,
.diet-btn-ictxt[data-size="sm"] .diet-btn-ictxt__icon svg {
  inline-size: var(--icon-size-16, 1rem);
  block-size: var(--icon-size-16, 1rem);
}

.diet-btn-ictxt[data-size="md"] .diet-btn-ictxt__icon,
.diet-btn-ictxt[data-size="md"] .diet-btn-ictxt__icon svg {
  inline-size: var(--icon-size-16, 1rem);
  block-size: var(--icon-size-16, 1rem);
}

.diet-btn-ictxt[data-size="lg"] .diet-btn-ictxt__icon,
.diet-btn-ictxt[data-size="lg"] .diet-btn-ictxt__icon svg {
  inline-size: var(--icon-size-16, 1rem);
  block-size: var(--icon-size-16, 1rem);
}

.diet-btn-ictxt[data-size="xl"] .diet-btn-ictxt__icon,
.diet-btn-ictxt[data-size="xl"] .diet-btn-ictxt__icon svg {
  inline-size: var(--icon-size-20, 1.25rem);
  block-size: var(--icon-size-20, 1.25rem);
}

.diet-btn-ictxt__label {
  display: inline;
  white-space: nowrap;
  padding-inline: var(--space-0);
}

.diet-btn-ictxt:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-color);
  border-color: var(--btn-hover-border-color);
}

.diet-btn-ictxt:active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--btn-clicked-bg);
  color: var(--btn-clicked-color);
  border-color: var(--btn-clicked-border-color);
  transform: translateY(1px);
}

/* Focus visuals removed per design */

.diet-btn-ictxt:disabled,
.diet-btn-ictxt[aria-disabled="true"] {
  opacity: 0.48;
  cursor: not-allowed;
}

.diet-btn-ictxt[data-variant="primary"] {
  --btn-bg: var(--color-system-blue, #0a84ff);
  --btn-color: var(--color-system-white, #ffffff);
  --btn-border-color: transparent;
  --btn-hover-bg: color-mix(in oklab, var(--color-system-blue, #0a84ff), #000000 22%);
  --btn-clicked-bg: color-mix(in oklab, var(--color-system-blue, #0a84ff), #000000 40%);
}

.diet-btn-ictxt[data-variant="secondary"] {
  --btn-bg: color-mix(in oklab, var(--color-text) 8%, transparent);
  --btn-border-width: 0px;
  --btn-border-color: transparent;
  --btn-hover-bg: color-mix(in oklab, var(--color-text) 35%, transparent);
  --btn-hover-border-color: color-mix(in oklab, var(--color-text) 25%, transparent);
  --btn-clicked-bg: color-mix(in oklab, var(--color-text) 20%, transparent);
}

.diet-btn-ictxt[data-variant="neutral"] {
  --btn-bg: transparent;
  --btn-border-color: transparent;
  --btn-hover-bg: color-mix(in oklab, var(--color-text) 40%, transparent);
  --btn-hover-border-color: color-mix(in oklab, var(--color-text) 30%, transparent);
  --btn-clicked-bg: color-mix(in oklab, var(--color-text), transparent 75%);
}

.diet-btn-ictxt[data-variant="line1"] {
  --btn-bg: transparent;
  --btn-color: var(--color-system-blue, #0a84ff);
  --btn-border-width: 1px;
  --btn-border-color: var(--color-system-blue, #0a84ff);
  --btn-hover-bg: color-mix(in oklab, var(--color-system-blue, #0a84ff), transparent 60%);
  --btn-clicked-bg: color-mix(in oklab, var(--color-system-blue, #0a84ff), transparent 30%);
}

.diet-btn-ictxt[data-variant="line2"] {
  --btn-bg: transparent;
  --btn-color: var(--color-system-gray-contrast, #636366);
  --btn-border-width: 1px;
  --btn-border-color: var(--color-system-gray-contrast, #636366);
  --btn-hover-bg: color-mix(in oklab, var(--color-system-gray-contrast, #636366), transparent 75%);
  --btn-clicked-bg: color-mix(in oklab, var(--color-system-gray-contrast, #636366), transparent 55%);
}

/* Text Only Button */
.diet-btn-txt {
  --btn-bg: var(--color-surface);
  --btn-color: var(--color-text);
  --btn-border-color: transparent;
  --btn-border-width: 0px;
  --btn-hover-bg: color-mix(in oklab, var(--btn-bg), var(--btn-color) 6%);
  --btn-hover-color: var(--btn-color);
  --btn-hover-border-color: var(--btn-border-color);
  --btn-clicked-bg: color-mix(in oklab, var(--btn-bg), var(--btn-color) 14%);
  --btn-clicked-color: var(--btn-color);
  --btn-clicked-border-color: var(--btn-border-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: var(--btn-height);
  padding-inline: var(--control-padding-inline);
  padding-block: 0;
  border-radius: var(--btn-radius);
  border: var(--btn-border-width) solid var(--btn-border-color);
  background: var(--btn-bg);
  color: var(--btn-color);
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.diet-btn-txt > * { pointer-events: none; }

.diet-btn-txt[data-size="xs"] {
  --btn-height: var(--control-size-xs, 1rem);
  --btn-radius: var(--control-radius-xs, 0.25rem);
}

.diet-btn-txt[data-size="sm"] {
  --btn-height: var(--control-size-sm, 1.25rem);
  --btn-radius: var(--control-radius-sm, 0.3125rem);
}

.diet-btn-txt[data-size="md"] {
  --btn-height: var(--control-size-md, 1.5rem);
  --btn-radius: var(--control-radius-sm, 0.25rem);
}

.diet-btn-txt[data-size="lg"] {
  --btn-height: var(--control-size-lg, 1.75rem);
  --btn-radius: var(--control-radius-md, 0.375rem);
}

.diet-btn-txt[data-size="xl"] {
  --btn-height: var(--control-size-xl, 2rem);
  --btn-radius: var(--control-radius-md, 0.375rem);
}

.diet-btn-txt__label {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding-inline: var(--space-0);
}

.diet-btn-txt:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-color);
  border-color: var(--btn-hover-border-color);
}

.diet-btn-txt:active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--btn-clicked-bg);
  color: var(--btn-clicked-color);
  border-color: var(--btn-clicked-border-color);
  transform: translateY(1px);
}

/* Focus visuals removed per design */

.diet-btn-txt:disabled,
.diet-btn-txt[aria-disabled="true"] {
  opacity: 0.48;
  cursor: not-allowed;
}

.diet-btn-txt[data-variant="primary"] {
  --btn-bg: var(--color-system-blue, #0a84ff);
  --btn-color: var(--color-system-white, #ffffff);
  --btn-border-color: transparent;
  --btn-hover-bg: color-mix(in oklab, var(--color-system-blue, #0a84ff), #000000 22%);
  --btn-clicked-bg: color-mix(in oklab, var(--color-system-blue, #0a84ff), #000000 40%);
}

.diet-btn-txt[data-variant="secondary"] {
  --btn-bg: color-mix(in oklab, var(--color-text) 8%, transparent);
  --btn-border-width: 0px;
  --btn-border-color: transparent;
  --btn-hover-bg: color-mix(in oklab, var(--color-text) 12%, transparent);
  --btn-clicked-bg: color-mix(in oklab, var(--color-text) 20%, transparent);
}

.diet-btn-txt[data-variant="neutral"] {
  --btn-bg: transparent;
  --btn-border-color: transparent;
  --btn-hover-bg: color-mix(in oklab, var(--color-text), transparent 88%);
  --btn-clicked-bg: color-mix(in oklab, var(--color-text), transparent 75%);
}

.diet-btn-txt[data-variant="line1"] {
  --btn-bg: transparent;
  --btn-color: var(--color-system-blue, #0a84ff);
  --btn-border-width: 1px;
  --btn-border-color: var(--color-system-blue, #0a84ff);
  --btn-hover-bg: color-mix(in oklab, var(--color-system-blue, #0a84ff), transparent 60%);
  --btn-clicked-bg: color-mix(in oklab, var(--color-system-blue, #0a84ff), transparent 30%);
}

.diet-btn-txt[data-variant="line2"] {
  --btn-bg: transparent;
  --btn-color: var(--color-system-gray-contrast, #636366);
  --btn-border-width: 1px;
  --btn-border-color: var(--color-system-gray-contrast, #636366);
  --btn-hover-bg: color-mix(in oklab, var(--color-system-gray-contrast, #636366), transparent 75%);
  --btn-clicked-bg: color-mix(in oklab, var(--color-system-gray-contrast, #636366), transparent 55%);
}

/* Icon Only Button */
.diet-btn-ic {
  --btn-bg: var(--color-surface);
  --btn-color: var(--color-text);
  --btn-border-color: transparent;
  --btn-border-width: 0px;
  --btn-hover-bg: color-mix(in oklab, var(--btn-bg), var(--btn-color) 6%);
  --btn-hover-color: var(--btn-color);
  --btn-hover-border-color: var(--btn-border-color);
  --btn-clicked-bg: color-mix(in oklab, var(--btn-bg), var(--btn-color) 14%);
  --btn-clicked-color: var(--btn-color);
  --btn-clicked-border-color: var(--btn-border-color);
  --btn-icon-color: currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--btn-height);
  block-size: var(--btn-height);
  min-height: var(--btn-height);
  padding: 0;
  border-radius: var(--btn-radius);
  border: var(--btn-border-width) solid var(--btn-border-color);
  background: var(--btn-bg);
  color: var(--btn-color);
  cursor: pointer;
  transition:
    background-color 150ms ease,
    color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.diet-btn-ic > * { pointer-events: none; }

.diet-btn-ic[data-size="xs"] {
  --btn-height: var(--control-size-xs, 1rem);
  --btn-radius: var(--control-radius-xs, 0.25rem);
}

.diet-btn-ic[data-size="sm"] {
  --btn-height: var(--control-size-sm, 1.25rem);
  --btn-radius: var(--control-radius-sm, 0.3125rem);
}

.diet-btn-ic[data-size="md"] {
  --btn-height: var(--control-size-md, 1.5rem);
  --btn-radius: var(--control-radius-sm, 0.25rem);
}

.diet-btn-ic[data-size="lg"] {
  --btn-height: var(--control-size-lg, 1.75rem);
  --btn-radius: var(--control-radius-md, 0.375rem);
}

.diet-btn-ic[data-size="xl"] {
  --btn-height: var(--control-size-xl, 2rem);
  --btn-radius: var(--control-radius-md, 0.375rem);
}

.diet-btn-ic__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--btn-icon-color);
}

.diet-btn-ic__icon svg {
  inline-size: 100%;
  block-size: 100%;
  display: block;
}

.diet-btn-ic[data-size="xs"] .diet-btn-ic__icon {
  inline-size: var(--icon-size-12, 0.75rem);
  block-size: var(--icon-size-12, 0.75rem);
}

.diet-btn-ic[data-size="sm"] .diet-btn-ic__icon {
  inline-size: var(--icon-size-16, 1rem);
  block-size: var(--icon-size-16, 1rem);
}

.diet-btn-ic[data-size="md"] .diet-btn-ic__icon {
  inline-size: var(--icon-size-16, 1rem);
  block-size: var(--icon-size-16, 1rem);
}

.diet-btn-ic[data-size="lg"] .diet-btn-ic__icon {
  inline-size: var(--icon-size-16, 1rem);
  block-size: var(--icon-size-16, 1rem);
}

.diet-btn-ic[data-size="xl"] .diet-btn-ic__icon {
  inline-size: var(--icon-size-20, 1.25rem);
  block-size: var(--icon-size-20, 1.25rem);
}

.diet-btn-ic:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-color);
  border-color: var(--btn-hover-border-color);
}

.diet-btn-ic:active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--btn-clicked-bg);
  color: var(--btn-clicked-color);
  border-color: var(--btn-clicked-border-color);
  transform: translateY(1px);
}

/* Focus visuals removed per design */

.diet-btn-ic:disabled,
.diet-btn-ic[aria-disabled="true"] {
  opacity: 0.48;
  cursor: not-allowed;
}

.diet-btn-ic[data-variant="primary"] {
  --btn-bg: var(--color-system-blue, #0a84ff);
  --btn-color: var(--color-system-white, #ffffff);
  --btn-border-color: transparent;
  --btn-hover-bg: color-mix(in oklab, var(--color-system-blue, #0a84ff), #000000 22%);
  --btn-clicked-bg: color-mix(in oklab, var(--color-system-blue, #0a84ff), #000000 40%);
}

.diet-btn-ic[data-variant="secondary"] {
  --btn-bg: color-mix(in oklab, var(--color-text) 8%, transparent);
  --btn-border-width: 0px;
  --btn-border-color: transparent;
  --btn-hover-bg: color-mix(in oklab, var(--color-text) 12%, transparent);
  --btn-clicked-bg: color-mix(in oklab, var(--color-text) 20%, transparent);
}

.diet-btn-ic[data-variant="neutral"] {
  --btn-bg: transparent;
  --btn-border-color: transparent;
  --btn-hover-bg: color-mix(in oklab, var(--color-text), transparent 88%);
  --btn-clicked-bg: color-mix(in oklab, var(--color-text), transparent 75%);
}

.diet-btn-ic[data-variant="line1"] {
  --btn-bg: transparent;
  --btn-color: var(--color-system-blue, #0a84ff);
  --btn-border-width: 1px;
  --btn-border-color: var(--color-system-blue, #0a84ff);
  --btn-hover-bg: color-mix(in oklab, var(--color-system-blue, #0a84ff), transparent 60%);
  --btn-clicked-bg: color-mix(in oklab, var(--color-system-blue, #0a84ff), transparent 30%);
}