/**
 * Gutenberg List Block Style Variations
 *
 * Custom list styles: check, check-outline, chevron.
 * Colors adapt to the parent block's color scheme via
 * [data-color-scheme] context variables.
 *
 * @package Mestariteema
 */

/* ============================================
   Base: variable defaults + list reset
   ============================================ */
.wp-block-list.is-style-check-list,
.wp-block-list.is-style-check-outline-list,
.wp-block-list.is-style-chevron-list {
    --mestari-list-text-color: var(--scheme-text, var(--scheme-1-text));
    --mestari-list-icon-color: var(--scheme-heading, var(--scheme-1-heading));
    --mestari-list-icon-contrast: var(--scheme-bg, var(--scheme-1-bg));
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0;
    color: var(--mestari-list-text-color);
}

.editor-styles-wrapper .wp-block-list.is-style-check-list,
.editor-styles-wrapper .wp-block-list.is-style-check-outline-list,
.editor-styles-wrapper .wp-block-list.is-style-chevron-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0;
}

/* ============================================
   List items: padding + marker reset
   ============================================ */
.wp-block-list.is-style-check-list > li,
.wp-block-list.is-style-check-outline-list > li,
.wp-block-list.is-style-chevron-list > li {
    position: relative;
    list-style: none !important;
    margin-bottom: 0.9em;
    padding-left: 2.1em;
}

.wp-block-list.is-style-check-list > li::marker,
.wp-block-list.is-style-check-outline-list > li::marker,
.wp-block-list.is-style-chevron-list > li::marker {
    content: "" !important;
}

.editor-styles-wrapper .wp-block-list.is-style-check-list > li,
.editor-styles-wrapper .wp-block-list.is-style-check-outline-list > li,
.editor-styles-wrapper .wp-block-list.is-style-chevron-list > li {
    position: relative;
    list-style: none !important;
    margin-bottom: 0.9em;
    padding-left: 2.1em;
}

.editor-styles-wrapper .wp-block-list.is-style-check-list > li::marker,
.editor-styles-wrapper .wp-block-list.is-style-check-outline-list > li::marker,
.editor-styles-wrapper .wp-block-list.is-style-chevron-list > li::marker {
    content: "" !important;
}

/* ============================================
   Check + Check Outline: shared circle base
   ============================================ */
.wp-block-list.is-style-check-list > li::before,
.wp-block-list.is-style-check-outline-list > li::before,
.editor-styles-wrapper .wp-block-list.is-style-check-list > li::before,
.editor-styles-wrapper .wp-block-list.is-style-check-outline-list > li::before {
    content: "\2713";
    position: absolute;
    top: 0.15em;
    left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35em;
    height: 1.35em;
    border-radius: 50%;
    font-size: 0.85em;
    line-height: 1;
    font-weight: 700;
    box-sizing: border-box;
}

/* Check: filled circle */
.wp-block-list.is-style-check-list > li::before,
.editor-styles-wrapper .wp-block-list.is-style-check-list > li::before {
    background: var(--mestari-list-icon-color);
    color: var(--mestari-list-icon-contrast);
}

/* Check Outline: transparent with border */
.wp-block-list.is-style-check-outline-list > li::before,
.editor-styles-wrapper .wp-block-list.is-style-check-outline-list > li::before {
    background: transparent;
    color: var(--mestari-list-icon-color);
    border: 2px solid currentColor;
}

/* ============================================
   Chevron: arrow indicator
   ============================================ */
.wp-block-list.is-style-chevron-list > li::before,
.editor-styles-wrapper .wp-block-list.is-style-chevron-list > li::before {
    content: "";
    position: absolute;
    top: 0.45em;
    left: 0.2em;
    width: 0.55em;
    height: 0.55em;
    border-right: 2px solid var(--mestari-list-icon-color);
    border-bottom: 2px solid var(--mestari-list-icon-color);
    transform: rotate(-45deg);
    opacity: 0.85;
}

/* ============================================
   Nested lists
   ============================================ */
.wp-block-list.is-style-check-list ul,
.wp-block-list.is-style-check-list ol,
.wp-block-list.is-style-check-outline-list ul,
.wp-block-list.is-style-check-outline-list ol,
.wp-block-list.is-style-chevron-list ul,
.wp-block-list.is-style-chevron-list ol {
    list-style: inherit;
    margin-top: 0.6em;
    padding-left: 1.4em;
}