/*
  Wojo Framework 4.0 — List
  Namespace prefix: .wf-list
  Requires: wf-layout.css, wf-colors.css

*/
.wf-list {
   --_list-pad-v: .375rem;
   --_list-pad-h: 0;
   --_list-gap: .625rem;
   --_list-fg: var(--wf-text);
   --_list-fg-muted: var(--wf-text-muted);
   --_list-border: var(--wf-border);
   --_list-hover-bg: var(--wf-surface-subtle);
   --_list-active-bg: var(--wf-surface-elevated);
   --wf-list-icon-color: var(--wf-text-muted);
   --_list-icon-color: var(--wf-list-icon-color);
   --_list-icon-size: 1rem;
   --_list-item-gap: var(--_list-gap);
   margin: 0;
   padding: 0;
   font-size: 1rem;
   line-height: 1.5;
   color: var(--_list-fg);
   list-style: none;
}
.wf-list > .wf-list-item,
.wf-list > li {
   display: flex;
   gap: var(--_list-item-gap);
   position: relative;
   padding: var(--_list-pad-v) var(--_list-pad-h);
}
/* Explicit opt-in: allow wf-gap utilities only when applied on the list itself. */
.wf-list.wf-gap,
.wf-table-list[class^="wf-gap-"],
.wf-table-list[class*=" wf-gap-"],
.wf-description-list[class*=" wf-gap-"],
.wf-description-list[class*=" wf-gap-"],
.wf-list[class^="wf-gap-"],
.wf-list[class*=" wf-gap-"] {
   --_list-item-gap: var(--wf-gap, var(--_list-gap));
}
.wf-list .wf-list {
   margin-block-start: .375rem;
   font-size: .875rem;
}
.wf-list .wf-list:dir(ltr) {
   padding-inline-start: 1rem;
}
.wf-list .wf-list:dir(rtl) {
   padding-inline-end: 1rem;
}
.wf-list-content {
   flex: 1 1 0;
   min-width: 0;
}
:where(.wf-list-header) {
   display: block;
   font-weight: 600;
   line-height: 1.3;
   color: var(--_list-fg);
}
:where(.wf-list-description) {
   display: block;
   font-size: .875rem;
   line-height: 1.3;
   color: var(--_list-fg-muted);
}
:where(.wf-list-icon):where(.icon),
:where(.wf-list-icon) {
   display: inline-flex;
   flex-shrink: 0;
   color: var(--wf-list-icon-color, var(--_list-icon-color));
}
/* Keep list size variants authoritative even if wf-icon-* utility classes are present. */
.wf-list i.wf-list-icon.icon,
.wf-list .wf-list-icon > i.icon {
   font-size: var(--_list-icon-size);
   color: inherit;
}
/* Links */
.wf-list a {
   color: var(--wf-primary);
   text-decoration: none;
   transition: all .35s ease;
}
.wf-list a:hover {
   text-decoration: underline;
   transition: all .55s ease;
}
.wf-list-bulleted > .wf-list-item:before {
   content: "•";
   flex-shrink: 0;
   line-height: inherit;
   color: var(--_list-fg-muted);
}
ul.wf-list {
   list-style: outside;
}
ul.wf-list:dir(ltr) {
   padding-inline-start: 0;
}
ul.wf-list:dir(rtl) {
   padding-inline-end: 0;
}
ul.wf-list > li {
   display: list-item;
}
ul.wf-list > li:dir(ltr) {
   padding-inline-start: .25rem;
}
ul.wf-list > li:dir(rtl) {
   padding-inline-end: .25rem;
}
ul.wf-list > li::marker {
   color: var(--_list-fg-muted);
}
ul.wf-list ul {
   list-style: circle;
}
.wf-list-ordered {
   counter-reset: wf-ordered;
}
.wf-list-ordered > .wf-list-item:before {
   content: counter(wf-ordered);
   flex-shrink: 0;
   min-width: 1.4rem;
   font-weight: 700;
   line-height: inherit;
   color: var(--_list-fg-muted);
   text-align: end;
   counter-increment: wf-ordered;
}
.wf-list-ordered .wf-list-ordered {
   counter-reset: wf-nested;
}
.wf-list-ordered .wf-list-ordered > .wf-list-item:before {
   content: counter(wf-ordered) "." counter(wf-nested);
   counter-increment: wf-nested;
}
ol.wf-list {
   list-style: decimal;
}
ol.wf-list:dir(ltr) {
   padding-inline-start: 1.75em;
}
ol.wf-list:dir(rtl) {
   padding-inline-end: 1.75em;
}
ol.wf-list > li {
   display: list-item;
}
ol.wf-list > li::marker {
   font-weight: 700;
   color: var(--_list-fg-muted);
}
.wf-list-link > .wf-list-item,
.wf-list-link > a.wf-list-item {
   transition: color .15s;
   cursor: pointer;
   border-radius: var(--wf-radius-3);
   color: var(--_list-fg);
   text-decoration: none;
}
.wf-list-link > .wf-list-item:hover,
.wf-list-link > a.wf-list-item:hover {
   color: var(--wf-primary);
}
.wf-list-link > .wf-list-item.wf-active,
.wf-list-link > a.wf-list-item.wf-active {
   font-weight: 600;
   color: var(--wf-primary);
}
.wf-list-horizontal {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   column-gap: var(--_list-item-gap);
}
.wf-list-horizontal > .wf-list-item,
.wf-list-horizontal > li {
   padding-inline: 0;
   padding-block: 0;
}
.wf-list-horizontal.wf-list-bulleted > .wf-list-item + .wf-list-item:before {
   content: "•";
}
.wf-list-horizontal.wf-list-bulleted > .wf-list-item:first-child:before {
   content: none;
}
.wf-list-divided:not(.wf-list-horizontal) > .wf-list-item + .wf-list-item,
.wf-list-divided:not(.wf-list-horizontal) > li + li {
   border-block-start: 1px solid var(--_list-border);
}
.wf-list-celled:not(.wf-list-horizontal) > .wf-list-item,
.wf-list-celled:not(.wf-list-horizontal) > li {
   border-block-start: 1px solid var(--_list-border);
   padding: .625rem .875rem;
   /*background: var(--wf-surface);*/
}
.wf-list-celled:not(.wf-list-horizontal) > .wf-list-item + .wf-list-item:last-of-type,
.wf-list-celled:not(.wf-list-horizontal) > li + li:last-of-type,
.wf-list-celled:not(.wf-list-horizontal) > .wf-list-item:last-of-type,
.wf-list-celled:not(.wf-list-horizontal) > li:last-of-type {
   border-block-end: 1px solid var(--_list-border);
}
.wf-list-divided.wf-list-horizontal > .wf-list-item:last-of-type:after,
.wf-list-divided.wf-list-horizontal > li:last-of-type:after,
.wf-list-divided.wf-list-horizontal > .wf-list-item + .wf-list-item:before, /* Separator for horizontal divided lists (between items) */
.wf-list-divided.wf-list-horizontal > li + li:before, /* Separator for horizontal divided lists (between items) */
.wf-list-divided:not(.wf-list-horizontal) > li:before,
.wf-list-celled.wf-list-horizontal > .wf-list-item:before, /* Start border for celled horizontal lists */
.wf-list-celled.wf-list-horizontal > .wf-list-item:before,
.wf-list-celled:not(.wf-list-horizontal) > li:before {
   border-inline-start: 1px solid var(--_list-border);
   inset-block-start: 50%;
   inset-inline-start: 0;
   content: "";
   position: absolute;
   transform: translateY(-50%);
   height: 50%;
}
.wf-list-celled.wf-list-horizontal > .wf-list-item:last-of-type:after,
.wf-list-celled.wf-list-horizontal > li:last-of-type:after {
   border-inline-end: 1px solid var(--_list-border);
   inset-inline-start: auto;
   inset-inline-end: 0;
}
.wf-list-divided.wf-list-horizontal,
.wf-list-celled.wf-list-horizontal {
   column-gap: 0;
}
.wf-list-divided.wf-list-horizontal > .wf-list-item,
.wf-list-divided.wf-list-horizontal > li,
.wf-list-celled.wf-list-horizontal > .wf-list-item,
.wf-list-celled.wf-list-horizontal > li {
   padding-inline: calc(var(--_list-item-gap) / 2);
}
.wf-list-divided.wf-list-horizontal > .wf-list-item:first-child:dir(ltr),
.wf-list-divided.wf-list-horizontal > li:first-child:dir(ltr) {
   padding-inline-start: 0;
}
.wf-list-divided.wf-list-horizontal > .wf-list-item:first-child:dir(rtl),
.wf-list-divided.wf-list-horizontal > li:first-child:dir(rtl) {
   padding-inline-end: 0;
}
.wf-list-compact {
   --_list-pad-v: .25rem;
}
.wf-list-relaxed {
   --_list-pad-v: .75rem;
}
.wf-list-very-relaxed {
   --_list-pad-v: 1.125rem;
}
.wf-list-space-0 {
   --_list-item-space: 0;
}
.wf-list-space-3xs {
   --_list-pad-v: var(--wf-space-3xs);
}
.wf-list-space-2xs {
   --_list-pad-v: var(--wf-space-2xs);
}
.wf-list-space-xs {
   --_list-pad-v: var(--wf-space-xs);
}
.wf-list-space-sm {
   --_list-pad-v: var(--wf-space-sm);
}
.wf-list-space-md {
   --_list-pad-v: var(--wf-space-md);
}
.wf-list-space-lg {
   --_list-pad-v: var(--wf-space-lg);
}
.wf-list-space-xl {
   --_list-pad-v: var(--wf-space-xl);
}
.wf-list-space-2xl {
   --_list-pad-v: var(--wf-space-2xl);
}
.wf-table-list {
   display: grid;
   grid-template-columns: max-content 1fr;
   column-gap: var(--wf-gap, var(--wf-space-4));
}
.wf-table-list > label {
   font-size: .875rem;
   font-weight: 600;
}
.wf-description-list {
   display: grid;
   grid-template-columns: max-content 1fr;
   grid-gap: var(--wf-gap, var(--wf-space-4));
   margin: 0;
}
.wf-description-list dt {
   font-weight: 600;
}
.wf-description-list dd {
   margin: 0;
}
.wf-list-todo {
   padding-inline-start: 0;
   list-style: none;
}
.wf-list-todo > li,
.wf-list-todo > .wf-list-item {
   display: flex;
   align-items: baseline;
   gap: .5rem;
}
.wf-list-todo > li input[type="checkbox"],
.wf-list-todo > .wf-list-item input[type="checkbox"] {
   accent-color: var(--primary-color);
   flex-shrink: 0;
   margin: 0;
}
.wf-list-todo > li:has(input[type="checkbox"]:checked),
.wf-list-todo > .wf-list-item:has(input[type="checkbox"]:checked) {
   color: var(--_list-fg-muted);
   text-decoration: line-through;
}
.wf-list-selection > .wf-list-item,
.wf-list-selection > li {
   -webkit-user-select: none;
   user-select: none;
   border-radius: var(--wf-radius-3);
   padding-inline-start: .625rem;
   padding-inline-end: .625rem;
   transition: background-color .15s, color .15s;
   cursor: pointer;
}
.wf-list-selection > .wf-list-item:hover,
.wf-list-selection > li:hover {
   background: color-mix(in oklab, var(--grey-color) 7%, transparent);
   border-radius: var(--wf-radius-4);
}
.wf-list-selection > .wf-list-item.wf-active,
.wf-list-selection > li.wf-active {
   background: color-mix(in oklab, var(--grey-color) 7%, transparent);
   font-weight: 500;
   color: var(--wf-primary);
}
.wf-list-animated > .wf-list-item,
.wf-list-animated > li {
   padding-inline-start: .625rem;
   padding-inline-end: .625rem;
   cursor: pointer;
   border-radius: var(--wf-radius-4);
}
.wf-list-animated > .wf-list-item:dir(ltr),
.wf-list-animated > li:dir(ltr) {
   transition: background-color .18s, padding-inline-start .18s;
}
.wf-list-animated > .wf-list-item:dir(rtl),
.wf-list-animated > li:dir(rtl) {
   transition: background-color .18s, padding-inline-end .18s;
}
.wf-list-animated > .wf-list-item:hover,
.wf-list-animated > li:hover {
   background: color-mix(in oklab, var(--grey-color) 7%, transparent);
}
.wf-list-animated > .wf-list-item:hover:dir(ltr),
.wf-list-animated > li:hover:dir(ltr) {
   padding-inline-start: 1.25rem;
}
.wf-list-animated > .wf-list-item:hover:dir(rtl),
.wf-list-animated > li:hover:dir(rtl) {
   padding-inline-end: 1.25rem;
}
.wf-list-xs {
   --_list-icon-size: .75rem;
   font-size: .75rem;
}
.wf-list-sm {
   --_list-icon-size: .875rem;
   font-size: .875rem;
}
.wf-list-lg {
   --_list-icon-size: 1.125rem;
   font-size: 1.125rem;
}
.wf-list-xl {
   --_list-icon-size: 1.25rem;
   font-size: 1.25rem;
}