/* ==========================================================================
   UROVO CKEditor List Styles
   Shared list markers and semantic colors for CKEditor and frontend rich text.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. List Colors (黑色, 白色, primary, accent)
   Supports <ul> and <ol>, defining marker and Tailwind Prose tokens.
   -------------------------------------------------------------------------- */
:is(.prose, #edit-body-wrapper .ck-content, .ck.ck-content) :is(ul, ol).list-color--black,
:is(ul, ol).list-color--black {
  --tw-prose-bullets: var(--foreground, #1d2023);
  --tw-prose-counters: var(--foreground, #1d2023);
  --list-marker-color: var(--foreground, #1d2023);
}

:is(.prose, #edit-body-wrapper .ck-content, .ck.ck-content) :is(ul, ol).list-color--white,
:is(ul, ol).list-color--white {
  --tw-prose-bullets: #ffffff;
  --tw-prose-counters: #ffffff;
  --list-marker-color: #ffffff;
}

:is(.prose, #edit-body-wrapper .ck-content, .ck.ck-content) :is(ul, ol).list-color--primary,
:is(ul, ol).list-color--primary {
  --tw-prose-bullets: var(--primary, #00aeef);
  --tw-prose-counters: var(--primary, #00aeef);
  --list-marker-color: var(--primary, #00aeef);
}

:is(.prose, #edit-body-wrapper .ck-content, .ck.ck-content) :is(ul, ol).list-color--accent,
:is(ul, ol).list-color--accent {
  --tw-prose-bullets: var(--urovo-cyan, #0bb8ee);
  --tw-prose-counters: var(--urovo-cyan, #0bb8ee);
  --list-marker-color: var(--urovo-cyan, #0bb8ee);
}

/* Ensure ::marker adopts the configured color across browsers and prose environments */
:is(.prose, #edit-body-wrapper .ck-content, .ck.ck-content) :is(ul, ol)[class*="list-color--"] > li::marker,
:is(ul, ol)[class*="list-color--"] > li::marker {
  color: var(--list-marker-color) !important;
}

/* --------------------------------------------------------------------------
   2. Unordered List Types (disc, circle, check, diamond)
   -------------------------------------------------------------------------- */

/* 2.1 Disc (实心圆点) */
:is(.prose, #edit-body-wrapper .ck-content, .ck.ck-content) ul.list-type--disc,
ul.list-type--disc {
  list-style-type: disc !important;
}
ul.list-type--disc > li::marker {
  color: var(--list-marker-color, inherit);
}

/* 2.2 Circle (空心圆点) */
:is(.prose, #edit-body-wrapper .ck-content, .ck.ck-content) ul.list-type--circle,
ul.list-type--circle {
  list-style-type: circle !important;
}
ul.list-type--circle > li::marker {
  color: var(--list-marker-color, inherit);
}

/* 2.3 Check (小钩子) */
:is(.prose, #edit-body-wrapper .ck-content, .ck.ck-content) ul.list-type--check,
ul.list-type--check {
  list-style: none !important;
  list-style-type: none !important;
  padding-inline-start: 1.5rem;
}
ul.list-type--check > li {
  position: relative;
  padding-inline-start: 0.25rem;
}
:is(.prose, #edit-body-wrapper .ck-content, .ck.ck-content) ul.list-type--check > li::marker,
ul.list-type--check > li::marker {
  content: none !important;
  display: none !important;
}
ul.list-type--check > li::before {
  content: "";
  position: absolute;
  inset-inline-start: -1.35rem;
  top: 0.32em;
  width: 0.85em;
  height: 0.85em;
  background-color: var(--list-marker-color, var(--primary, #00aeef));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}

/* 2.4 Diamond (菱形) */
:is(.prose, #edit-body-wrapper .ck-content, .ck.ck-content) ul.list-type--diamond,
ul.list-type--diamond {
  list-style: none !important;
  list-style-type: none !important;
  padding-inline-start: 1.5rem;
}
ul.list-type--diamond > li {
  position: relative;
  padding-inline-start: 0.25rem;
}
:is(.prose, #edit-body-wrapper .ck-content, .ck.ck-content) ul.list-type--diamond > li::marker,
ul.list-type--diamond > li::marker {
  content: none !important;
  display: none !important;
}
ul.list-type--diamond > li::before {
  content: "";
  position: absolute;
  inset-inline-start: -1.15rem;
  top: 0.55em;
  width: 0.45em;
  height: 0.45em;
  background-color: var(--list-marker-color, currentColor);
  transform: rotate(45deg);
  border-radius: 1px;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   3. Ordered List Types (numeric, roman)
   -------------------------------------------------------------------------- */

/* 3.1 Numeric (阿拉伯数字) */
:is(.prose, #edit-body-wrapper .ck-content, .ck.ck-content) ol.list-type--numeric,
ol.list-type--numeric {
  list-style-type: decimal !important;
}
ol.list-type--numeric > li::marker {
  color: var(--list-marker-color, inherit);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* 3.2 Roman (罗马数字) */
:is(.prose, #edit-body-wrapper .ck-content, .ck.ck-content) ol.list-type--roman,
ol.list-type--roman {
  list-style-type: upper-roman !important;
}
ol.list-type--roman > li::marker {
  color: var(--list-marker-color, inherit);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}