/* ============================================
   CTA Button Style  (is-style-cta)
   Registered in functions.php via register_block_style()
   ============================================ */

.wp-block-button {
    transform: scale(1);
	transition: transform 0.3s ease;
}

.wp-block-button:hover {
    transform: scale(0.95);
}

/* The White Circle Container for the Arrow */
.wp-block-button.is-style-cta .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    column-gap: .75rem;
    padding-left: .5rem;
    position: relative;
}

.wp-block-button.is-style-cta .wp-block-button__link::before {
    content: "";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background-color: var(--wp--preset--color--white);
    border-radius: 50%;
    font-size: 2rem;
    line-height: 2rem;
    position: relative;
}

/* Inner arrow that inherits the button's background color */
.wp-block-button.is-style-cta .wp-block-button__link::after {
    content: "";
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1.5rem;
    height: 1.5rem;

    /* Inherit the orange color from .book-btn */
    background-color: inherit; 

    /* Use the SVG as a mask */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12L20 12M20 12L14 18M20 12L14 6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12L20 12M20 12L14 18M20 12L14 6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}