/* ==========================================================================
   Custom List Styles
   ========================================================================== */

:root {
    /* Hexagon */
    --batao-hex-size: 34px;
    --batao-hex-color: #353565;
    --batao-hex-border-color: #C9C9E4;
    --batao-hex-font-size: 14px;
    --batao-hex-gap: 50px;

    /* Checkmark */
    --batao-check-size: 28px;
    --batao-check-gap: 45px;

    /* Shared */
    --batao-transition: all 0.2s ease;
}

/* ==========================================================================
   Hexagon List Style
   ========================================================================== */

.wp-block-list.is-style-hexagon {
    list-style: none;
    padding-left: 0;
    counter-reset: hexagon-counter;
}

.wp-block-list.is-style-hexagon > li {
    position: relative;
    padding-left: var(--batao-hex-gap);
    counter-increment: hexagon-counter;
    cursor: pointer;
}

/* Hexagon shape */
.wp-block-list.is-style-hexagon > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: var(--batao-hex-size);
    height: var(--batao-hex-size);
    background-image: url('../icons/hex-default.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: var(--batao-transition);
}

/* Hexagon number */
.wp-block-list.is-style-hexagon > li::after {
    content: counter(hexagon-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: var(--batao-hex-size);
    height: var(--batao-hex-size);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--batao-hex-color);
    font-weight: 700;
    font-size: var(--batao-hex-font-size);
    transition: var(--batao-transition);
}

/* Hexagon hover */
.wp-block-list.is-style-hexagon > li:hover::before {
    background-image: url('../icons/hex-hover.svg');
}

.wp-block-list.is-style-hexagon > li:hover::after {
    color: #FFFFFF;
}

/* ==========================================================================
   Checkmark List Style
   ========================================================================== */

.wp-block-list.is-style-checkmark {
    list-style: none;
    padding-left: 0;
}

.wp-block-list.is-style-checkmark > li {
    position: relative;
    padding-left: var(--batao-check-gap);
}

.wp-block-list.is-style-checkmark > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: var(--batao-check-size);
    height: var(--batao-check-size);
    background-color: currentColor;
    mask-image: url('../icons/circle-check-regular-full.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}