:root {
    --flashy-color: #c3914f; /* change as needed */
}
/* Base button */
.dna-flashy-button {
    position: relative;
    display: inline-block;
    margin-top: 20px;
    padding: 10px 24px;
    border: 2px solid #c3914f;
    border-radius: 32px;
    /*background: #ffffff;*/ /* white background initially */
    color: var(--flashy-color); /* green text initially */
    font-weight: 700;
    text-decoration: none;
    overflow: hidden; /* clip the animated fill */
    transition: color .32s ease;
    z-index: 0; /* establish stacking context */
}

    /* animated fill via scaleX (hidden initially) */
    .dna-flashy-button::before {
        content: "";
        position: absolute;
        inset: 0; /* cover the full button area */
        background: var(--flashy-color); /* green fill */
        transform: scaleX(0); /* collapsed - NOT visible */
        transform-origin: left center; /* will expand rightwards for LTR */
        transition: transform .32s cubic-bezier(.22,.9,.32,1);
        will-change: transform;
        z-index: -1; /* behind content, above page background */
        pointer-events: none;
    }

    /* hover/keyboard focus => expand fill and change text color */
    .dna-flashy-button:hover::before,
    .dna-flashy-button:focus::before {
        transform: scaleX(1); /* fully visible */
    }

    .dna-flashy-button:hover,
    .dna-flashy-button:focus {
        color: #ffffff; /* text becomes white */
    }

/* RTL: invert the transform origin so scaleX grows leftwards (i.e. right -> left) */
[dir="rtl"] .dna-flashy-button::before {
    transform-origin: right center;
}

/* ICON placement for LTR/RTL (toggle visibility) */
.ltr-icon {
    display: inline-block;
    margin-left: 8px;
}

.rtl-icon {
    display: none;
    margin-right: 8px;
}

[dir="rtl"] .ltr-icon {
    display: none;
}

[dir="rtl"] .rtl-icon {
    display: inline-block;
}