@import url('../../../icomoon/style.css');

/* Certainties style*/

/* Add auto increment counter to certainties */

.wp-block-group .wp-block-details[class*="is-style-certainties"] {
    counter-increment: certainties;
}

.wp-block-group {
    counter-reset: certainties;
}

/* Add styles for small screens */

.wp-block-details[class*="is-style-certainties"] {
    background-color: var(--wp--preset--color--base-variant);
    color: var(--wp--preset--color--contrast-variant);
    display: flex;
    flex-direction: column;
    position: relative;
}

[class*="is-style-section-base-variant"] .wp-block-details[class*="is-style-certainties"] {
    background-color: var(--wp--preset--color--base);
}

.wp-block-details[class*="is-style-certainties"] summary {
    font-weight: 700;
    line-height: 1;
    font-size: var(--wp--preset--font-size--large);
    list-style: none;
    padding: var(--wp--preset--spacing--50);
    background-color: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--base);
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--20);
    transition: background-color 0.3s ease;

    &:hover {
        background-color: color-mix(in srgb, var(--wp--preset--color--secondary) 80%, var(--wp--preset--color--contrast) );
    }
}

.wp-block-details[class*="is-style-certainties-alt"] summary {
    background-color: var(--wp--preset--color--primary);

    &:hover {
        background-color: color-mix(in srgb, var(--wp--preset--color--primary) 80%, var(--wp--preset--color--contrast) );
    }
}


.wp-block-details[class*="is-style-certainties"] summary:before {
    content: counter(certainties);
    font-size: var(--wp--preset--font-size--huge);
    width: 26px;
    font-weight: 900;
}

.wp-block-details[class*="is-style-certainties"] summary:after {
    content: "\ea01";
    font-family: 'icomoon';
    flex: 1;
    text-align: right;
}

.wp-block-details[class*="is-style-certainties"][open] summary:after {
    content: "\e9e9";
}

.wp-block-details[class*="is-style-certainties"] summary::-webkit-details-marker {
    display: none;
}

.wp-block-details[class*="is-style-certainties"] > *:not(summary) {
    margin: 0;
    padding: var(--wp--preset--spacing--50);
}

.wp-block-details[class*="is-style-certainties"]:not([open]) > *:not(summary) {
    margin: 0;
    display: none;
}

/* Add styles for large screens */

@media screen and (min-width: 782px) {
    .wp-block-details[class*="is-style-certainties"] {
        padding: var(--wp--preset--spacing--50);
        padding-left: calc(80px + var(--wp--preset--spacing--50));
        gap: var(--wp--preset--spacing--40);
    }
    .wp-block-details[class*="is-style-certainties"] summary {
        pointer-events: none;
        padding: 0;
        background: transparent;
        color: var(--wp--preset--color--contrast-variant);

        &:hover {
            background-color: transparent;
        }
    }
    .wp-block-details[class*="is-style-certainties"] summary:before,
    .wp-block-details[class*="is-style-certainties"] summary:after {
        display: none;
    }
    .wp-block-details[class*="is-style-certainties"] > *:not(summary) {
        padding: 0;
    }
    .wp-block-details[class*="is-style-certainties"]:before {
        content: counter(certainties);
        background-color: var(--wp--preset--color--secondary);
        color: var(--wp--preset--color--base);
        position: absolute;
        left: 0;
        top: 0;
        width: 80px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        font-size: var(--wp--preset--font-size--gigantic);
    }    

    .wp-block-details[class*="is-style-certainties-alt"]:before {
        background-color: var(--wp--preset--color--primary);
    }
}

/* Stretch details block if only item in column */
.wp-block-column > :first-child:last-child.wp-block-details[class*="is-style-certainties"] {
    height: 100%;
}

/* Set spacing between adjacent detail blocks */
@media screen and (max-width: 781px) {
    .wp-block-details[class*="is-style-certainties"] + .wp-block-details[class*="is-style-certainties"] {
        margin-top: var(--wp--preset--spacing--20);
    }
}
:where(.editor-styles-wrapper) .wp-block-details[class*="is-style-certainties"] summary *{
    pointer-events: none!important;
}