:root {
    --btn-bg: var(--green);
    --btn-bg: #0062ff;

    --btn-text-dark: rgb(51, 51, 94);
    --btn-text-light: rgb(255, 255, 255);
    --btn-height: 52px;
    --btn-pad: 4px;
    --btn-accent: #fff;
    --btn-circle: calc(var(--btn-height) - (var(--btn-pad) * 2));
    /* 40px */
}

.contact-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: var(--btn-height);
    padding: var(--btn-pad);
    border: none;
    border-radius: 16px;
    background: var(--green);
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    /* Added to prevent default link underlines */
}

/* the static white label sitting on the dark background.
It never moves — the lime fill simply grows over the top of it. */
.contact-btn__label {
    position: relative;
    z-index: 1;
    margin-left: calc(var(--btn-circle) + 24px);
    /* circle width + gap */
    margin-right: 24px;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 500;
    color: var(--btn-text-light);
    transition: all .4s cubic-bezier(.4, 0, .2, 1);

    will-change: transform, opacity;
}

/* the lime pill — starts as a circle around the icon, grows to fill the button */
.contact-btn__fill {
    position: absolute;
    top: var(--btn-pad);
    left: var(--btn-pad);
    height: var(--btn-circle);
    width: var(--btn-circle);
    border-radius: 12px;
    background: var(--btn-accent);
    overflow: hidden;
    z-index: 2;
    transition: width .4s cubic-bezier(.4, 0, .2, 1);
}

.contact-btn:hover .contact-btn__fill {
    width: calc(100% - (var(--btn-pad) * 2));
}

.contact-btn:hover .contact-btn__fill-label {
    transform: translateY(-50%) translateX(0%);
}

.contact-btn:hover .contact-btn__label {
    transform: translateX(50%);
    opacity: 0;
}

/* dark label lives inside the fill at a fixed offset — it's simply
revealed as the fill's overflow-hidden edge grows past it */
.contact-btn__fill-label {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%) translateX(-136%);
    white-space: nowrap;
    font-size: 15px;
    font-weight: 500;
    transition: 0.5s transform ease;
    display: block;
    color: var(--btn-text-dark);
}

/* icon is pinned to the fill's right edge via `right`, so as the fill's
width transitions, the icon rides along with it automatically */
.contact-btn__icon {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-btn__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.contact-btn__icon line,
.contact-btn__icon polyline {
    stroke: var(--btn-text-dark);
}