// Rôle : gère le contenu, les checklists et la progression des noeuds.
@use "../../design-system/controls";

.goal-tree-node-main {
  grid-area: main;
  display: grid;
  align-content: start;
  justify-items: stretch;
  gap: 5px;
  min-width: 0;
  min-height: 46px;
  padding: 5px;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  text-align: center;
  box-shadow: none;
}

.goal-tree-node.is-step > .goal-tree-node-card > .goal-tree-node-main {
  justify-items: center;
  min-height: 58px;
}

.goal-tree-node-main:hover,
.goal-tree-node-main:focus {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.goal-tree-node-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.goal-tree-node-icon {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--goal-tree-node-color, var(--color-accent-gold)) 45%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--goal-tree-node-color, var(--color-accent-gold)) 14%, transparent);
  color: var(--goal-tree-node-color, var(--color-accent-gold));
}

.goal-tree-node-icon .ui-icon {
  width: 15px;
  height: 15px;
}

.goal-tree-node.is-step > .goal-tree-node-card > .goal-tree-node-main > .goal-tree-node-icon {
  width: 42px;
  height: 42px;
}

.goal-tree-node.is-step > .goal-tree-node-card > .goal-tree-node-main > .goal-tree-node-icon .ui-icon {
  width: 27px;
  height: 27px;
}

.goal-tree-node-title {
  overflow: hidden;
  min-width: 0;
  color: var(--color-text-primary);
  font-size: 0.78rem;
  font-weight: 900;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goal-tree-node-content-preview {
  display: grid;
  width: 100%;
  min-height: 0;
  gap: 3px;
  justify-items: stretch;
  color: var(--color-text-primary);
}

.goal-tree-node-content-preview:empty {
  display: none;
}

.goal-tree-node-content-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px;
  align-items: center;
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 800;
  text-align: left;
}

.goal-tree-node.is-checklist .goal-tree-node-content-row {
  grid-template-columns: auto minmax(0, 1fr);
}

.goal-tree-node.is-text .goal-tree-node-content-row {
  grid-template-columns: auto minmax(0, 1fr);
}

.goal-tree-node.is-text .goal-tree-node-content-row::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

.goal-tree-node-content-row strong {
  color: var(--color-accent-gold);
  font-size: 0.72rem;
}

.goal-tree-node-content-label {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goal-tree-node-content-add-button {
  @include controls.dashed-action-button;
  display: grid;
  width: 100%;
  min-height: 20px;
  padding: 0;
  place-items: center;
}

.goal-tree-node-content-add-button:hover,
.goal-tree-node-content-add-button:focus-visible {
  @include controls.dashed-action-button-hover;
}

.goal-tree-node-content-add-button .ui-icon {
  width: 12px;
  height: 12px;
}

.goal-tree-node.is-checklist .goal-tree-node-content-label {
  padding-left: 2px;
}

.goal-tree-node-check {
  display: grid;
  width: 10px;
  height: 10px;
  margin: 0;
  accent-color: var(--color-accent-cyan);
}

.goal-tree-step-check {
  justify-self: center;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--color-accent-gold);
}

.goal-tree-step-qty-stepper {
  justify-self: center;
  @include controls.quantity-stepper(sm);
}

.goal-tree-step-qty-stepper button {
  @include controls.quantity-stepper-button(sm);
}

.goal-tree-step-qty-stepper button:hover {
  @include controls.quantity-stepper-button-hover;
}

.goal-tree-step-qty-stepper .ui-icon {
  @include controls.quantity-stepper-button-icon(sm);
}

.goal-tree-node-content-row .goal-tree-content-qty-stepper {
  justify-self: start;
  @include controls.quantity-stepper(xs);
}

.goal-tree-node-content-row .goal-tree-content-qty-stepper button {
  @include controls.quantity-stepper-button(xs);
}

.goal-tree-node-content-row .goal-tree-content-qty-stepper button:hover {
  @include controls.quantity-stepper-button-hover;
}

.goal-tree-node-content-row .goal-tree-content-qty-stepper .ui-icon {
  @include controls.quantity-stepper-button-icon(xs);
}

.goal-tree-progress-track {
  grid-column: 1 / -1;
  justify-self: stretch;
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(150, 165, 205, 0.13);
}

.goal-tree-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-accent-gold), var(--color-accent-cyan));
}