/* Exercisable styles using standard CSS */

/* Base exercisable styling */
.exercisable {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Default text sizes for exercisables at root level */
.exercisable .exercise-name {
  font-size: 1.875rem; /* 30px - equivalent to text-3xl */
  line-height: 2.25rem;
  font-weight: 700;
}

.exercisable .exercise-mode {
  font-size: 1.5rem; /* 24px - equivalent to text-2xl */
  line-height: 2rem;
  font-weight: 700;
}

/* Detect nested exercisables using parent container */
/* When inside a block container (has data-parent-id attribute) */
[data-parent-id] .exercisable .exercise-name {
  font-size: 1.25rem; /* 20px - equivalent to text-xl */
  line-height: 1.75rem;
}

[data-parent-id] .exercisable .exercise-mode {
  font-size: 1.125rem; /* 18px - equivalent to text-lg */
  line-height: 1.75rem;
}

/* Add left border and padding for nested exercisables */
[data-parent-id] .exercisable {
  padding-left: 0.75rem; /* 12px */
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: rgb(229 231 235); /* gray-200 */
}

/* Dark mode border color */
.dark [data-parent-id] .exercisable,
[data-parent-id] .exercisable:where(.dark *) {
  border-left-color: rgb(55 65 81); /* gray-700 */
}

/* During drag operations - use the sortable classes to detect context */
/* When dragging INTO a block (sortable-drag class appears during drag) */
.sortable-drag.exercisable .exercise-name {
  /* Keep current size during drag based on destination */
  transition: font-size 0.2s ease;
}

.sortable-drag.exercisable .exercise-mode {
  transition: font-size 0.2s ease;
}

/* When ghost is inside a block container */
[data-parent-id] .sortable-ghost.exercisable .exercise-name {
  font-size: 1.25rem;
}

[data-parent-id] .sortable-ghost.exercisable .exercise-mode {
  font-size: 1.125rem;
}