.button-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-6);
    border-radius: var(--radius-pill);
    border: 0;
    background-color: var(--green);
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease),
        transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.button-link:hover {
    background-color: var(--text);
    color: var(--surface);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.button-link .icon {
    width: 2.25rem;
    height: 2.25rem;
    background-image: url('../../images/icons/seta-button.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: background-image var(--duration) var(--ease);
}

.button-link:hover .icon {
    background-image: url('../../images/icons/seta-button-green.svg');
}

.button-link__icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
}