/* Arrow Link Button Style */
.wp-block-button.is-style-arrow-link .wp-block-button__link {
    /*background: transparent !important;*/
    border: none !important;
    box-shadow: none !important;
    display: inline-block;
    position: relative;
    transition: all 0.3s ease;
}

.wp-block-button.is-style-arrow-link .wp-block-button__link:hover {
    background: transparent !important;
    opacity: 1 !important;
}

/* Only underline the text on hover, not the arrows */
.wp-block-button.is-style-arrow-link .wp-block-button__link:hover span {
    text-decoration: underline;
}

/* Arrow decorations using CSS masks for color inheritance */
.wp-block-button.is-style-arrow-link .wp-block-button__link:before,
.wp-block-button.is-style-arrow-link .wp-block-button__link:after {
    content: "";
    display: inline-block;
    width: 47px;
    height: 7px;
    vertical-align: middle;
    background-color: currentColor; /* This inherits the button text color */
    mask-image: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 47 7.1'%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: %23000; %7D .st1 %7B fill: none; stroke: %23000; %7D %3C/style%3E%3C/defs%3E%3Cline class='st1' x1='40.5' y1='3.6' x2='1' y2='3.6'/%3E%3Cpolygon class='st0' points='46 3.6 39 1 39 6.1 46 3.6'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 47 7.1'%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: %23000; %7D .st1 %7B fill: none; stroke: %23000; %7D %3C/style%3E%3C/defs%3E%3Cline class='st1' x1='40.5' y1='3.6' x2='1' y2='3.6'/%3E%3Cpolygon class='st0' points='46 3.6 39 1 39 6.1 46 3.6'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.wp-block-button.is-style-arrow-link .wp-block-button__link:before {
    margin-right: .5em;
}

.wp-block-button.is-style-arrow-link .wp-block-button__link:after {
    transform: rotate(180deg);
    margin-left: .5em;
}

/* Fallback for browsers that don't support mask-image (uses white arrows) */
@supports not (mask-image: url("")) {
    .wp-block-button.is-style-arrow-link .wp-block-button__link:before,
    .wp-block-button.is-style-arrow-link .wp-block-button__link:after {
        content: "\27F6 \00A0";
        background-color: transparent;
        background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 47 7.1'%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: %23fff; %7D .st1 %7B fill: none; stroke: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cline class='st1' x1='40.5' y1='3.6' x2='1' y2='3.6'/%3E%3Cpolygon class='st0' points='46 3.6 39 1 39 6.1 46 3.6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center right;
        background-size: 100%;
        color: transparent;
        mask-image: none;
        -webkit-mask-image: none;
    }
    
    .wp-block-button.is-style-arrow-link .wp-block-button__link:after {
        transform: rotate(180deg) translateX(-.5em);
    }
}

/* Editor specific styles */
.editor-styles-wrapper .wp-block-button.is-style-arrow-link .wp-block-button__link {
    box-shadow: none !important;
}

@media all and (max-width:450px){
    .wp-block-button.is-style-arrow-link .wp-block-button__link {
        text-align: left;
        text-indent: -35px;
    }
    .wp-block-button.is-style-arrow-link .wp-block-button__link:after {
        display: none;
    }
}