/**
  * Add Icon
  */

.has-icon:not(.wp-block-button, .wp-block-details),
.has-icon-right:not(.wp-block-button, .wp-block-details) {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    line-height: 1;
    --icon-color: currentColor;
}

.has-icon:not(.wp-block-button, .wp-block-details):before,
.has-icon-right:not(.wp-block-button, .wp-block-details):after {
    content: "";
    min-width: 24px;
    min-height: 24px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: var(--icon-color);
    -webkit-mask-image: var(--image-url);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-image: var(--image-url);
    mask-repeat: no-repeat;
    mask-size: contain;
}

.has-icon .wp-block-button__link,
.has-icon-right .wp-block-button__link{
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    line-height: 1;
    --icon-color: currentColor;
}

.has-icon .wp-block-button__link:before,
.has-icon-right .wp-block-button__link:after {
    content: "";
    min-width: 24px;
    min-height: 24px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    line-height: 1;
    background-color: var(--icon-color);
    -webkit-mask-image: var(--image-url);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-image: var(--image-url);
    mask-repeat: no-repeat;
    mask-size: contain;
}

/**
  * Icon Sizes 
  */    

.icon-size-32.has-icon summary:before,
.icon-size-32.has-icon-right summary:after,
.icon-size-32.has-icon:not(.wp-block-button,
.wp-block-details):before,
.icon-size-32.has-icon-right:not(.wp-block-button,
.wp-block-details):after,
.icon-size-32.has-icon .wp-block-button__link:before,
.icon-size-32.has-icon-right .wp-block-button__link:after {
    width: 32px;
    height: 32px;
}

.icon-size-40.has-icon summary:before,
.icon-size-40.has-icon-right summary:after,
.icon-size-40.has-icon:not(.wp-block-button,
.wp-block-details):before,
.wp-block-details summary:after,
.icon-size-40.has-icon-right:not(.wp-block-button,
.wp-block-details):after,
.icon-size-40.has-icon .wp-block-button__link:before,
.icon-size-40.has-icon-right .wp-block-button__link:after {
    width: 40px;
    height: 40px;
}

.icon-size-48.has-icon summary:before,
.icon-size-48.has-icon-right summary:after,
.icon-size-48.has-icon:not(.wp-block-button,
.wp-block-details):before,
.icon-size-48.has-icon-right:not(.wp-block-button,
.wp-block-details):after,
.icon-size-48.has-icon .wp-block-button__link:before,
.icon-size-48.has-icon-right .wp-block-button__link:after {
    width: 48px;
    height: 48px;
}

.icon-size-54.has-icon summary:before,
.icon-size-54.has-icon-right summary:after,
.icon-size-54.has-icon:not(.wp-block-button,
.wp-block-details):before,
.icon-size-54.has-icon-right:not(.wp-block-button,
.wp-block-details):after,
.icon-size-54.has-icon .wp-block-button__link:before,
.icon-size-54.has-icon-right .wp-block-button__link:after {
    width: 54px;
    height: 54px;
}

/**
  * Icons
  */

/* Phone Icon */
.icon-phone:before,
.has-icon-right.icon-phone:after,
.icon-phone .wp-block-button__link:before,
.has-icon-right.icon-phone .wp-block-button__link:after{
    --image-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z' /%3E%3C/svg%3E ");
}

/* Arrow Left Icon */
.icon-arrow-left:before,
.has-icon-left.icon-arrow-right:after,
.icon-arrow-left .wp-block-button__link:before,
.has-icon-right.icon-arrow-left .wp-block-button__link:after {
    --image-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m11.25 9-3 3m0 0 3 3m-3-3h7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z' /%3E%3C/svg%3E ");
}

/* Arrow Right Icon */
.icon-arrow-right:before,
.has-icon-right.icon-arrow-right:after,
.icon-arrow-right .wp-block-button__link:before,
.has-icon-right.icon-arrow-right .wp-block-button__link:after {
    --image-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m12.75 15 3-3m0 0-3-3m3 3h-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z' /%3E%3C/svg%3E ");
}
/*Email Icon */
.icon-email:before,
.has-icon-right.icon-email:after,
.icon-email .wp-block-button__link:before,
.has-icon-right.icon-email .wp-block-button__link:after { 
    --image-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23004A80' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75' /%3E%3C/svg%3E ");
}

/* Plus Icon */
.icon-plus:before,
.has-icon-right.icon-plus:after,
.has-icon summary:before,
.has-icon-right summary:after,
.wp-block-details summary:after,
.icon-plus .wp-block-button__link:before,
.has-icon-right.icon-plus .wp-block-button__link:after {
    --image-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23004A80' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z' /%3E%3C/svg%3E ");
}

/* Minus Icon */
.icon-minus:before,
.has-icon-right.icon-minus:after,
.icon-minus .wp-block-button__link:before,
.has-icon-right.icon-minus .wp-block-button__link:after {
    --image-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23004A80' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 12H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z' /%3E%3C/svg%3E ");
}

/* check Icon */
.icon-check:before,
.has-icon-right.icon-check:after,
.icon-check .wp-block-button__link:before,
.has-icon-right.icon-check .wp-block-button__link:after {
    --image-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23004A80' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z' /%3E%3C/svg%3E ");
}

/* credit card Icon */
.icon-credit-card:before,
.has-icon-right.icon-credit-card:after,
.icon-credit-card .wp-block-button__link:before,
.has-icon-right.icon-credit-card .wp-block-button__link:after {
    --image-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23004A80' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z' /%3E%3C/svg%3E ");
}

/* close Icon */
.icon-close:before,
.has-icon-right.icon-close:after,
.icon-close .wp-block-button__link:before,
.has-icon-right.icon-close .wp-block-button__link:after {
    --image-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23004A80' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z' /%3E%3C/svg%3E ");
}

/* icon download */
.icon-download:before,
.has-icon-right.icon-download:after,
.icon-download .wp-block-button__link:before,
.has-icon-right.icon-download .wp-block-button__link:after {
    --image-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3' /%3E%3C/svg%3E ");
}

/* icon chevron down */
.icon-chevron-down:before,
.has-icon-right.icon-chevron-down:after,
.icon-chevron-down .wp-block-button__link:before,
.has-icon-right.icon-chevron-down .wp-block-button__link:after {
    --image-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E ");   
}

/* icon chevron up */
.icon-chevron-up:before,
.has-icon-right.icon-chevron-up:after,
.icon-chevron-up .wp-block-button__link:before,
.has-icon-right.icon-chevron-up .wp-block-button__link:after {
    --image-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 15.75 7.5-7.5 7.5 7.5' /%3E%3C/svg%3E ");   
}

/* icon chevron left */
.icon-chevron-left:before,
.has-icon-right.icon-chevron-left:after,
.icon-chevron-left .wp-block-button__link:before,
.has-icon-right.icon-chevron-left .wp-block-button__link:after {
    --image-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 19.5 8.25 12l7.5-7.5' /%3E%3C/svg%3E ");   
}   

/* icon chevron right */
.icon-chevron-right:before,
.has-icon-right.icon-chevron-right:after,
.icon-chevron-right .wp-block-button__link:before,
.has-icon-right.icon-chevron-right .wp-block-button__link:after {
    --image-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m8.25 4.5 7.5 7.5-7.5 7.5' /%3E%3C/svg%3E ");   
}

/* icon cart */
.icon-cart:before,
.has-icon-right.icon-cart:after,
.icon-cart .wp-block-button__link:before,
.has-icon-right.icon-cart .wp-block-button__link:after {
    --image-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z' /%3E%3C/svg%3E ");   
}   

/* icon battery */
.icon-battery:before,
.has-icon-right.icon-battery:after,
.icon-battery .wp-block-button__link:before,
.has-icon-right.icon-battery .wp-block-button__link:after {
    --image-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'%3E%3Cpath fill='none' stroke-linecap='round' stroke-linejoin='round' d='M21 10.5h.375c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125H21M4.5 10.5h6.75V15H4.5v-4.5ZM3.75 18h15A2.25 2.25 0 0 0 21 15.75v-6a2.25 2.25 0 0 0-2.25-2.25h-15A2.25 2.25 0 0 0 1.5 9.75v6A2.25 2.25 0 0 0 3.75 18Z' /%3E%3C/svg%3E ");   
}   

/**
 * Blocks
 */
.wp-block-details.has-icon summary::before,
.wp-block-details summary::after,
.wp-block-details.has-icon-right summary::after {
    content: "";
        min-width: 40px;
        min-height: 40px;
        line-height: 1;
        background-color: var(--icon-color);
        -webkit-mask-image: var(--image-url);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-image: var(--image-url);
        mask-repeat: no-repeat;
        mask-size: contain;
        transition: all .15s ease-in-out;
} 
.wp-block-details.has-icon[open] summary::before,
.wp-block-details[open] summary::after,
.wp-block-details.has-icon-right[open] summary::after {
    transform: rotate(45deg);
} 

.wp-block-details summary {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    --icon-color: currentColor;
	padding-left: 10px;
    line-height: 1.3;
    align-items: center;
}

.wp-block-details {
    color: inherit;
    --icon-color: currentColor;
}

summary {
    /* Pin the custom marker to the container */
    position: relative;

    &::marker {
        content: "";
    }

}