:root{
    --orange: var(--wp--preset--color--vk-color-primary-vivid);
    --olive: var(--wp--preset--color--vk-color-custom-1);
    --teal: var(--wp--preset--color--vk-color-custom-2);
    --gold: var(--wp--preset--color--vk-color-custom-3);
    --red: var(--wp--preset--color--vk-color-custom-4);
    --ivory: #f6f4f2;
    --gray: #656565;
    --logo_gray: var(--wp--preset--color--vk-color-custom-5);
    --olive_light: #f4f5ef;
}

.is-style-default,:where(:not([class^="is-style"]):not([class*=" is-style"])).wp-block-heading{
    h2&{
        background: var(--olive_light);
        position: relative;
        padding: 1.5rem 1rem;
        border-left: solid .33em var(--olive);
        border-radius: 0 0 0 .5rem;
        &:after{
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            width: 1.25em;
            aspect-ratio: 2;
            display: block;
            background: linear-gradient(to right,var(--orange), var(--orange) 20%,#fff 20%,#fff 25%,var(--teal) 25%,var(--teal) 45%,#fff 45%,#fff 50%,var(--gold) 50%,var(--gold) 70%,#fff 70%,#fff 75%,var(--olive) 75%,var(--olive) 95%,#fff 95%);
        }
    }
    h3&{
        padding: .75rem .5em .5em 1em;
        border: solid 2px var(--olive);
        line-height: 1.2;
        position: relative;
        border-radius: 0 .5rem .5rem;
        &::before{
            content: '';
            position: absolute;
            width: 1.25em;
            height: 1.25em;
            background: var(--olive);
            clip-path: polygon(0 0, 100% 0, 0 100%);
            top: -1px;
            left: -1px;
        }
        &:after{
            content: '';
            display: block;
            border-top: dotted 1px var(--olive);
            margin-top: .2em;
        }
    }
    h4&{
        padding: .5em .5em .5em 1em;
        position: relative;
        &::before{
            content: '';
            position: absolute;
            width: 1.5em;
            height: 1.5em;
            background: var(--olive_light);
            clip-path: polygon(0 100%, 100% 0, 100% 100%);
            right: 0;
            bottom: 0;
        }
        &:after{
            content: '';
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            width: .3em;
            height: 100%;
            background: var(--olive);
            border-radius: .15em;
        }
    }
    h5&{
        padding-left: 1.5em;
        text-indent: -1.5em;
        border-bottom: solid 1px var(--olive);
        padding-bottom: .5em;
        position: relative;
        &:before{
            content: '●';
            display: inline-block;
            width: 1.5em;
            text-indent: 0;
            transform-origin: left;
            transform: scale(1.5);
        }
    }
}


.is-style-square-deco{
    border: solid 4px var(--orange);
    border-width: 4px 0;
    position: relative;
    padding: 1.5rem .75rem;
    &:after,&:before{
        content: '';
        display: block;
        position: absolute;
        width: 1.25em;
        aspect-ratio: 3;
        background: linear-gradient(to right,var(--orange), var(--orange) 20%,#fff 20%,#fff 25%,var(--teal) 25%,var(--teal) 45%,#fff 45%,#fff 50%,var(--gold) 50%,var(--gold) 70%,#fff 70%,#fff 75%,var(--olive) 75%,var(--olive) 95%,#fff 95%);
    }
    &:before{
        left: -4px;
        top: -4px;
    }
    &:after{
        right: -4px;
        bottom: -4px;
        transform: scaleX(-1);
    }
}